diff --git a/desktop/src/features/channels/ui/BotActivityBar.tsx b/desktop/src/features/channels/ui/BotActivityBar.tsx
index 21ab04f8d6..d685a96103 100644
--- a/desktop/src/features/channels/ui/BotActivityBar.tsx
+++ b/desktop/src/features/channels/ui/BotActivityBar.tsx
@@ -164,7 +164,7 @@ export function BotActivityComposerAction({
           className={cn(
             "inline-flex items-center justify-center rounded-full border border-border/60 bg-background font-medium text-muted-foreground transition-colors hover:border-primary/30 hover:bg-primary/5 hover:text-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring data-[state=open]:border-primary/40 data-[state=open]:bg-primary/10 data-[state=open]:text-primary",
             isInline
-              ? "h-7 min-w-0 gap-2 overflow-visible border-transparent bg-transparent px-0 text-xs font-semibold leading-none shadow-none hover:border-transparent hover:bg-transparent data-[state=open]:border-transparent data-[state=open]:bg-transparent"
+              ? "min-w-0 gap-1.5 overflow-visible border-transparent bg-transparent px-0 text-xs font-normal leading-normal shadow-none hover:border-transparent hover:bg-transparent data-[state=open]:border-transparent data-[state=open]:bg-transparent"
               : "h-9 min-w-9 gap-1.5 px-2 text-xs",
           )}
           data-testid="bot-activity-composer-trigger"
@@ -178,17 +178,16 @@ export function BotActivityComposerAction({
           onMouseLeave={closeWithDelay}
           type="button"
         >
-          <span className="flex items-center overflow-visible py-px -space-x-1">
+          <span className="flex h-4.5 items-center overflow-visible -space-x-1">
             {workingAgents.slice(0, 2).map((agent) => (
               <UserAvatar
                 avatarUrl={agentAvatarUrl(agent)}
                 className={cn(
                   "border border-background",
-                  isInline
-                    ? "!h-[18px] !w-[18px] shadow-xs ring-1 ring-primary/25 text-3xs"
-                    : "shrink-0",
+                  isInline ? "!h-4.5 !w-4.5 text-3xs" : "shrink-0",
                 )}
                 displayName={agent.name}
+                fallbackDelayMs={isInline ? 0 : undefined}
                 key={agent.pubkey}
                 size="xs"
               />
@@ -201,11 +200,15 @@ export function BotActivityComposerAction({
           ) : null}
           <span
             className={cn(
-              isInline ? "min-w-0 flex-1 overflow-hidden" : "sr-only",
+              isInline
+                ? "flex h-4.5 min-w-0 flex-1 items-center overflow-visible leading-none"
+                : "sr-only",
             )}
           >
             {isInline ? (
-              <Shimmer className="block truncate">{visibleStatusLabel}</Shimmer>
+              <Shimmer className="-my-px truncate py-px">
+                {visibleStatusLabel}
+              </Shimmer>
             ) : (
               "working"
             )}
diff --git a/desktop/src/features/channels/ui/ChannelComposerActivityAccessory.tsx b/desktop/src/features/channels/ui/ChannelComposerActivityAccessory.tsx
new file mode 100644
index 0000000000..216b205fcc
--- /dev/null
+++ b/desktop/src/features/channels/ui/ChannelComposerActivityAccessory.tsx
@@ -0,0 +1,66 @@
+import type { ComponentProps } from "react";
+
+import { BotActivityComposerAction } from "@/features/channels/ui/BotActivityBar";
+import { ComposerActivityAccessory } from "@/features/messages/ui/ComposerActivityAccessory";
+import { TypingIndicatorRow } from "@/features/messages/ui/TypingIndicatorRow";
+
+type ChannelComposerActivityAccessoryProps = {
+  agents: ComponentProps<typeof BotActivityComposerAction>["agents"];
+  channel: ComponentProps<typeof TypingIndicatorRow>["channel"];
+  currentPubkey: ComponentProps<typeof TypingIndicatorRow>["currentPubkey"];
+  onOpenAgentSession: ComponentProps<
+    typeof BotActivityComposerAction
+  >["onOpenAgentSession"];
+  openAgentSessionPubkey: ComponentProps<
+    typeof BotActivityComposerAction
+  >["openAgentSessionPubkey"];
+  profiles: ComponentProps<typeof BotActivityComposerAction>["profiles"];
+  typingPubkeys: string[];
+  visible: boolean;
+  workingBotPubkeys: string[];
+};
+
+export function ChannelComposerActivityAccessory({
+  agents,
+  channel,
+  currentPubkey,
+  onOpenAgentSession,
+  openAgentSessionPubkey,
+  profiles,
+  typingPubkeys,
+  visible,
+  workingBotPubkeys,
+}: ChannelComposerActivityAccessoryProps) {
+  return (
+    <ComposerActivityAccessory
+      className="px-5"
+      testId="channel-composer-activity-row"
+      visible={visible}
+    >
+      <div className="flex w-full items-center gap-2 overflow-visible pl-2">
+        {workingBotPubkeys.length > 0 ? (
+          <div className="flex min-w-0 flex-1 overflow-visible">
+            <BotActivityComposerAction
+              agents={agents}
+              channelId={channel?.id ?? null}
+              onOpenAgentSession={onOpenAgentSession}
+              openAgentSessionPubkey={openAgentSessionPubkey}
+              profiles={profiles}
+              workingBotPubkeys={workingBotPubkeys}
+              variant="inline"
+            />
+          </div>
+        ) : null}
+        {typingPubkeys.length > 0 ? (
+          <TypingIndicatorRow
+            channel={channel}
+            className="min-w-0 flex-1 py-0 pl-[calc(0.75rem+1px)] pr-0 sm:pl-[calc(1rem+1px)]"
+            currentPubkey={currentPubkey}
+            profiles={profiles}
+            typingPubkeys={typingPubkeys}
+          />
+        ) : null}
+      </div>
+    </ComposerActivityAccessory>
+  );
+}
diff --git a/desktop/src/features/channels/ui/ChannelPane.tsx b/desktop/src/features/channels/ui/ChannelPane.tsx
index 6fb7ff4ef3..92fa172ff5 100644
--- a/desktop/src/features/channels/ui/ChannelPane.tsx
+++ b/desktop/src/features/channels/ui/ChannelPane.tsx
@@ -3,6 +3,7 @@ import { Hash, LogIn } from "lucide-react";
 import { AnimatePresence } from "motion/react";
 import { useAppNavigation } from "@/app/navigation/useAppNavigation";
 import { useMediaUpload } from "@/features/messages/lib/useMediaUpload";
+import { ComposerDockBackdrop } from "@/features/messages/ui/ComposerDockBackdrop";
 import { MessageComposer } from "@/features/messages/ui/MessageComposer";
 import { ComposerTimeoutBanner } from "@/features/moderation/ui/ComposerTimeoutBanner";
 import { useTimeoutState } from "@/features/moderation/lib/timeoutStore";
@@ -25,7 +26,6 @@ import {
   buildVideoReviewContextForMessage,
 } from "@/features/messages/lib/videoReviewContext";
 import { useComposerHeightPadding } from "@/features/messages/ui/useComposerHeightPadding";
-import { TypingIndicatorRow } from "@/features/messages/ui/TypingIndicatorRow";
 import { UserProfilePanel } from "@/features/profile/ui/UserProfilePanel";
 import { ChannelFindBar } from "@/features/search/ui/ChannelFindBar";
 import { AgentSessionThreadPanel } from "@/features/channels/ui/AgentSessionThreadPanel";
@@ -40,6 +40,7 @@ import { useThreadViewModeSwitch } from "@/features/channels/ui/useThreadViewMod
 import { useFocusDrawerPresence } from "@/features/channels/ui/useFocusDrawerPresence";
 import { useChannelWorkingAgentPubkeys } from "@/features/agents/agentWorkingSignal";
 import { BotActivityComposerAction } from "@/features/channels/ui/BotActivityBar";
+import { ChannelComposerActivityAccessory } from "@/features/channels/ui/ChannelComposerActivityAccessory";
 import {
   containsWelcomePersonaMention,
   WelcomeComposerBanner,
@@ -218,6 +219,7 @@ export const ChannelPane = React.memo(function ChannelPane({
     composerWrapperRef,
     `${activeChannelId}:${isSinglePanelView}:${hasMainComposerOverlay}`,
     "css-variable",
+    () => messageTimelineRef.current?.settleAtBottom() ?? false,
   );
   const clearWelcomeComposerDismissTimer = React.useCallback(() => {
     if (welcomeComposerDismissTimerRef.current !== null) {
@@ -408,26 +410,18 @@ export const ChannelPane = React.memo(function ChannelPane({
     activeChannel?.id ?? null,
   );
   const hasComposerBotActivity = composerWorkingBotPubkeys.length > 0;
+  const hasComposerBottomActivity = hasComposerBotActivity || hasTypingActivity;
   const threadComposerBotTypingPubkeys = React.useMemo(() => {
-    if (!openThreadHeadId) {
-      return [];
-    }
-
-    const pubkeys: string[] = [];
-    for (const entry of botTypingEntries) {
-      if (entry.threadHeadId !== openThreadHeadId) {
-        continue;
-      }
-
-      if (
-        !pubkeys.some(
-          (pubkey) => pubkey.toLowerCase() === entry.pubkey.toLowerCase(),
-        )
-      ) {
-        pubkeys.push(entry.pubkey);
-      }
-    }
-    return pubkeys;
+    if (!openThreadHeadId) return [];
+    return botTypingEntries
+      .filter((entry) => entry.threadHeadId === openThreadHeadId)
+      .map((entry) => entry.pubkey)
+      .filter(
+        (pubkey, index, all) =>
+          all.findIndex(
+            (candidate) => candidate.toLowerCase() === pubkey.toLowerCase(),
+          ) === index,
+      );
   }, [botTypingEntries, openThreadHeadId]);
   const hasThreadComposerBotActivity =
     threadComposerBotTypingPubkeys.length > 0;
@@ -733,7 +727,12 @@ export const ChannelPane = React.memo(function ChannelPane({
               data-testid="channel-composer-overlay"
               ref={composerWrapperRef}
             >
-              <div className="composer-overlay-corner-masks pointer-events-auto">
+              <div
+                className={cn(
+                  "composer-dock composer-overlay-corner-masks relative pointer-events-auto",
+                  hasComposerBottomActivity && "composer-dock--with-activity",
+                )}
+              >
                 {timeoutState.active ? (
                   <ComposerTimeoutBanner
                     expiresAtMs={timeoutState.expiresAtMs}
@@ -747,11 +746,13 @@ export const ChannelPane = React.memo(function ChannelPane({
                     />
                   </div>
                 ) : null}
+                <ComposerDockBackdrop gutterClassName="inset-x-5" />
                 <MessageComposer
                   channelId={activeChannel?.id ?? null}
                   channelName={activeChannel?.name ?? "channel"}
                   channelType={activeChannel?.channelType ?? null}
-                  containerClassName="px-5"
+                  containerClassName="px-5 pb-0"
+                  layoutMode="dock"
                   disabled={isComposerDisabled}
                   editTarget={mainEditTarget}
                   autoSubmitDraftKey={autoSendDraftKey}
@@ -786,35 +787,21 @@ export const ChannelPane = React.memo(function ChannelPane({
                   }
                   showTopBorder={false}
                 />
-                <div
-                  className="min-h-8 overflow-visible bg-background px-5 pb-1.5 pt-0"
-                  data-testid="channel-composer-activity-row"
-                >
-                  <div className="flex h-full w-full items-center gap-2 overflow-visible">
-                    {hasComposerBotActivity ? (
-                      <div className="flex min-w-0 flex-1 overflow-visible">
-                        <BotActivityComposerAction
-                          agents={activityAgents}
-                          channelId={activeChannel?.id ?? null}
-                          onOpenAgentSession={onOpenAgentSession}
-                          openAgentSessionPubkey={openAgentSessionPubkey}
-                          profiles={profiles}
-                          workingBotPubkeys={composerWorkingBotPubkeys}
-                          variant="inline"
-                        />
-                      </div>
-                    ) : null}
-                    {hasTypingActivity ? (
-                      <TypingIndicatorRow
-                        channel={activeChannel}
-                        className="min-w-0 flex-1 py-0 pl-[calc(0.75rem+1px)] pr-0 sm:pl-[calc(1rem+1px)]"
-                        currentPubkey={currentPubkey}
-                        profiles={profiles}
-                        typingPubkeys={typingPubkeys}
-                      />
-                    ) : null}
-                  </div>
-                </div>
+                {/* The activity accessory is anchored in the dock's reserved
+                    bottom rail, so fading it cannot change the observed
+                    overlay height or move the conversation. Its natural
+                    content height remains responsive. */}
+                <ChannelComposerActivityAccessory
+                  agents={activityAgents}
+                  channel={activeChannel}
+                  currentPubkey={currentPubkey}
+                  onOpenAgentSession={onOpenAgentSession}
+                  openAgentSessionPubkey={openAgentSessionPubkey}
+                  profiles={profiles}
+                  typingPubkeys={typingPubkeys}
+                  visible={hasComposerBottomActivity}
+                  workingBotPubkeys={composerWorkingBotPubkeys}
+                />
               </div>
             </div>
           )}
@@ -898,7 +885,8 @@ export const ChannelPane = React.memo(function ChannelPane({
                 )}
                 threadReplyUnreadCounts={threadReplyUnreadCounts}
                 threadTypingPubkeys={threadTypingPubkeys}
-                toolbarExtraActions={
+                activityAccessoryVisible={hasThreadComposerBotActivity}
+                activityAccessoryContent={
                   hasThreadComposerBotActivity ? (
                     <BotActivityComposerAction
                       agents={activityAgents}
diff --git a/desktop/src/features/messages/ui/ComposerActivityAccessory.tsx b/desktop/src/features/messages/ui/ComposerActivityAccessory.tsx
new file mode 100644
index 0000000000..69889001ef
--- /dev/null
+++ b/desktop/src/features/messages/ui/ComposerActivityAccessory.tsx
@@ -0,0 +1,47 @@
+import type { ReactNode } from "react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+
+import { cn } from "@/shared/lib/cn";
+
+type ComposerActivityAccessoryProps = {
+  children: ReactNode;
+  className?: string;
+  testId?: string;
+  visible: boolean;
+};
+
+/**
+ * Fades activity content into the composer dock's reserved bottom rail without
+ * changing layout height. This keeps timeline scroll padding stable.
+ */
+export function ComposerActivityAccessory({
+  children,
+  className,
+  testId,
+  visible,
+}: ComposerActivityAccessoryProps) {
+  const prefersReducedMotion = useReducedMotion();
+
+  return (
+    <AnimatePresence initial={false}>
+      {visible ? (
+        <motion.div
+          animate={{ opacity: 1 }}
+          className={cn(
+            "composer-dock-activity absolute inset-x-0 z-10 bg-background",
+            className,
+          )}
+          data-testid={testId}
+          exit={{ opacity: 0 }}
+          initial={{ opacity: 0 }}
+          transition={{
+            duration: prefersReducedMotion ? 0 : 0.2,
+            ease: [0.23, 1, 0.32, 1],
+          }}
+        >
+          {children}
+        </motion.div>
+      ) : null}
+    </AnimatePresence>
+  );
+}
diff --git a/desktop/src/features/messages/ui/ComposerDockBackdrop.tsx b/desktop/src/features/messages/ui/ComposerDockBackdrop.tsx
new file mode 100644
index 0000000000..840be49bea
--- /dev/null
+++ b/desktop/src/features/messages/ui/ComposerDockBackdrop.tsx
@@ -0,0 +1,33 @@
+import { cn } from "@/shared/lib/cn";
+
+type ComposerDockBackdropProps = {
+  gutterClassName: string;
+};
+
+/**
+ * Owns the dock's stable backdrop blur separately from the resizing composer.
+ * An opaque rail mask covers the portion released for activity content.
+ */
+export function ComposerDockBackdrop({
+  gutterClassName,
+}: ComposerDockBackdropProps) {
+  return (
+    <>
+      <div
+        aria-hidden="true"
+        className={cn(
+          "pointer-events-none absolute inset-y-0 z-0",
+          gutterClassName,
+        )}
+        data-testid="composer-dock-backdrop"
+      >
+        <div className="h-full w-full rounded-2xl backdrop-blur-md dark:backdrop-blur-xl" />
+      </div>
+      <div
+        aria-hidden="true"
+        className="composer-dock-rail-mask pointer-events-none absolute inset-x-0 bottom-0 z-[5] bg-background"
+        data-testid="composer-dock-rail-mask"
+      />
+    </>
+  );
+}
diff --git a/desktop/src/features/messages/ui/ComposerDockToolbar.tsx b/desktop/src/features/messages/ui/ComposerDockToolbar.tsx
new file mode 100644
index 0000000000..6e62076d12
--- /dev/null
+++ b/desktop/src/features/messages/ui/ComposerDockToolbar.tsx
@@ -0,0 +1,30 @@
+import type { ComponentProps } from "react";
+
+import { MessageComposerToolbar } from "@/features/messages/ui/MessageComposerToolbar";
+
+type ComposerDockToolbarProps = ComponentProps<
+  typeof MessageComposerToolbar
+> & {
+  layoutMode: "dock" | "standalone";
+};
+
+/**
+ * Keeps the composer dock's total height stable by trading a quiet-state spacer
+ * for the equal-height activity rail outside the composer.
+ */
+export function ComposerDockToolbar({
+  layoutMode,
+  ...toolbarProps
+}: ComposerDockToolbarProps) {
+  return (
+    <>
+      {layoutMode === "dock" ? (
+        <div
+          aria-hidden="true"
+          className="composer-dock-quiet-spacer shrink-0"
+        />
+      ) : null}
+      <MessageComposerToolbar {...toolbarProps} />
+    </>
+  );
+}
diff --git a/desktop/src/features/messages/ui/MessageComposer.tsx b/desktop/src/features/messages/ui/MessageComposer.tsx
index 8c0c574049..df3a734cee 100644
--- a/desktop/src/features/messages/ui/MessageComposer.tsx
+++ b/desktop/src/features/messages/ui/MessageComposer.tsx
@@ -21,15 +21,11 @@ import {
 } from "@/features/messages/lib/imetaMediaMarkdown";
 
 import { useAttachmentEditing } from "@/features/messages/lib/useAttachmentEditing";
-import {
-  type MediaUploadController,
-  useMediaUpload,
-} from "@/features/messages/lib/useMediaUpload";
+import { useMediaUpload } from "@/features/messages/lib/useMediaUpload";
 import { useMentions } from "@/features/messages/lib/useMentions";
 import { diffAddedMentionPubkeys } from "@/features/messages/lib/threading";
 import { getPersistentAgentAudienceScope } from "@/features/messages/lib/persistentAgentAudience";
 import { useIdentityQuery } from "@/shared/api/hooks";
-import type { UserProfileLookup } from "@/features/profile/lib/identity";
 import {
   hasMentionClipboardHtml,
   normalizeMentionClipboardHtml,
@@ -45,7 +41,6 @@ import { useComposerSpoilerParticles } from "@/features/messages/lib/useComposer
 import { useTypingBroadcast } from "@/features/messages/useTypingBroadcast";
 import { getBuzzCodeBlockClipboardText } from "@/shared/lib/codeBlockClipboard";
 import { cn } from "@/shared/lib/cn";
-import type { ChannelType } from "@/shared/api/types";
 import { ChannelAutocomplete } from "./ChannelAutocomplete";
 import { ComposerReplyEditBanner } from "./ComposerReplyEditBanner";
 import { ComposerAttachments, DropZoneOverlay } from "./ComposerAttachments";
@@ -54,101 +49,14 @@ import {
   MentionAutocomplete,
   type MentionSuggestion,
 } from "./MentionAutocomplete";
-import { MessageComposerToolbar } from "./MessageComposerToolbar";
+import { ComposerDockToolbar } from "./ComposerDockToolbar";
 import { NonMemberMentionDialog } from "./NonMemberMentionDialog";
 import { useMentionSendFlow } from "./useMentionSendFlow";
 import { usePersistentAgentMentionHydration } from "./usePersistentAgentMentionHydration";
 import { useComposerContentState } from "./useComposerContentState";
 import { useDraftPersistLifecycle } from "./useDraftPersistSnapshot";
 
-type MessageComposerAudienceContext = {
-  type: "thread";
-  threadRootId: string;
-  initialAgentPubkeys?: readonly string[];
-};
-type MessageComposerProps = {
-  audienceContext?: MessageComposerAudienceContext | null;
-  channelId?: string | null;
-  channelName: string;
-  channelType?: ChannelType | null;
-  containerClassName?: string;
-  disabled?: boolean;
-  draftKey?: string;
-  /**
-   * When provided, the composer fires `submitMessage` once on mount after
-   * the draft matching this key has been loaded into the editor. This powers
-   * the "Send message" confirm-dialog flow in the Drafts panel. The callback
-   * `onAutoSubmitComplete` must clear the trigger (e.g. remove `?autoSend`
-   * from the URL) — it is called synchronously before `submitMessage` fires
-   * so the param is gone before any navigation the send might cause.
-   *
-   * Fires at most once per mount: a stable key value that persists across
-   * re-renders does NOT re-fire.
-   */
-  autoSubmitDraftKey?: string | null;
-  /** Called when the auto-submit fires so the parent can clear the trigger. */
-  onAutoSubmitComplete?: () => void;
-  editTarget?: {
-    author: string;
-    body: string;
-    id: string;
-    /**
-     * NIP-92 imeta attachments on the original event, in tag order. Loaded
-     * into the composer's pending-imeta state on edit-open so the user sees
-     * them as removable thumbnails (just like the send path) and can add
-     * more. The submit path emits a fresh full imeta tag set on the edit
-     * event; the receiver overlays it.
-     */
-    imetaMedia?: ImetaMedia[];
-  } | null;
-  isSending?: boolean;
-  mediaController?: MediaUploadController;
-  onCancelEdit?: () => void;
-  onCancelReply?: () => void;
-  /**
-   * Invoked when the user presses ↑ in an empty composer that is not already
-   * in edit mode. The owner should locate the most recent message authored by
-   * the current user within this composer's scope (main timeline, DM, or
-   * thread) and enter edit mode for it. Return `true` if a target was found
-   * and edit mode was entered, so the composer can swallow the keystroke;
-   * return `false` to let the arrow key fall through normally.
-   */
-  onEditLastOwnMessage?: () => boolean;
-  onEditSave?: (
-    content: string,
-    mediaTags?: string[][],
-    mentionPubkeys?: string[],
-  ) => Promise<void>;
-  /** Captures send context synchronously before awaits can change navigation. */
-  onCaptureSendContext?: () => {
-    parentEventId: string | null;
-    threadHeadId: string | null;
-  } | null;
-  /** Resolves the channel required to prepare mentions before sending. */
-  onPrepareSendChannel?: (pubkeys?: string[]) => Promise<string | null>;
-  onPreparingMentionSendChange?: (isPreparing: boolean) => void;
-  onSend: (
-    content: string,
-    mentionPubkeys: string[],
-    mediaTags?: string[][],
-    channelId?: string | null,
-    threadContext?: {
-      parentEventId: string | null;
-      threadHeadId: string | null;
-    } | null,
-  ) => Promise<void>;
-  placeholder?: string;
-  profiles?: UserProfileLookup;
-  replyTarget?: {
-    author: string;
-    body: string;
-    id: string;
-  } | null;
-  showTopBorder?: boolean;
-  toolbarExtraActions?: React.ReactNode;
-  typingParentEventId?: string | null;
-  typingRootEventId?: string | null;
-};
+import type { MessageComposerProps } from "./MessageComposer.types";
 
 function MessageComposerImpl({
   audienceContext = null,
@@ -156,6 +64,7 @@ function MessageComposerImpl({
   channelName,
   channelType = null,
   containerClassName,
+  layoutMode = "standalone",
   disabled = false,
   draftKey,
   autoSubmitDraftKey = null,
@@ -990,7 +899,11 @@ function MessageComposerImpl({
             onCancelReply={onCancelReply}
           />
           <form
-            className="relative z-10 isolate rounded-2xl border border-border/50 bg-background/80 px-3 pb-2 pt-3 shadow-none backdrop-blur-md supports-[backdrop-filter]:bg-background/70 dark:bg-background/70 dark:backdrop-blur-xl dark:supports-[backdrop-filter]:bg-background/55 sm:px-4"
+            className={cn(
+              "relative z-10 isolate rounded-2xl border border-border/50 bg-background/80 px-3 pb-2 pt-3 shadow-none supports-[backdrop-filter]:bg-background/70 dark:bg-background/70 dark:supports-[backdrop-filter]:bg-background/55 sm:px-4",
+              layoutMode === "standalone" &&
+                "backdrop-blur-md dark:backdrop-blur-xl",
+            )}
             data-testid="message-composer"
             onDragEnter={ownsDropZone ? media.handleDragEnter : undefined}
             onDragLeave={ownsDropZone ? media.handleDragLeave : undefined}
@@ -1072,7 +985,8 @@ function MessageComposerImpl({
               <EditorContent editor={richText.editor} />
             </div>
 
-            <MessageComposerToolbar
+            <ComposerDockToolbar
+              layoutMode={layoutMode}
               composerDisabled={disabled}
               editor={richText.editor}
               extraActions={toolbarExtraActions}
diff --git a/desktop/src/features/messages/ui/MessageComposer.types.ts b/desktop/src/features/messages/ui/MessageComposer.types.ts
new file mode 100644
index 0000000000..800474c3dd
--- /dev/null
+++ b/desktop/src/features/messages/ui/MessageComposer.types.ts
@@ -0,0 +1,98 @@
+import type { ReactNode } from "react";
+
+import type { ImetaMedia } from "@/features/messages/lib/imetaMediaMarkdown";
+import type { MediaUploadController } from "@/features/messages/lib/useMediaUpload";
+import type { UserProfileLookup } from "@/features/profile/lib/identity";
+import type { ChannelType } from "@/shared/api/types";
+
+export type MessageComposerProps = {
+  audienceContext?: {
+    type: "thread";
+    threadRootId: string;
+    initialAgentPubkeys?: readonly string[];
+  } | null;
+  channelId?: string | null;
+  channelName: string;
+  channelType?: ChannelType | null;
+  containerClassName?: string;
+  /**
+   * `dock` delegates backdrop blur and bottom-rail geometry to a surrounding
+   * composer dock. `standalone` keeps both concerns inside this component.
+   */
+  layoutMode?: "dock" | "standalone";
+  disabled?: boolean;
+  draftKey?: string;
+  /**
+   * When provided, the composer fires `submitMessage` once on mount after
+   * the draft matching this key has been loaded into the editor. This powers
+   * the "Send message" confirm-dialog flow in the Drafts panel. The callback
+   * `onAutoSubmitComplete` must clear the trigger (e.g. remove `?autoSend`
+   * from the URL) — it is called synchronously before `submitMessage` fires
+   * so the param is gone before any navigation the send might cause.
+   *
+   * Fires at most once per mount: a stable key value that persists across
+   * re-renders does NOT re-fire.
+   */
+  autoSubmitDraftKey?: string | null;
+  /** Called when the auto-submit fires so the parent can clear the trigger. */
+  onAutoSubmitComplete?: () => void;
+  editTarget?: {
+    author: string;
+    body: string;
+    id: string;
+    /**
+     * NIP-92 imeta attachments on the original event, in tag order. Loaded
+     * into the composer's pending-imeta state on edit-open so the user sees
+     * them as removable thumbnails (just like the send path) and can add
+     * more. The submit path emits a fresh full imeta tag set on the edit
+     * event; the receiver overlays it.
+     */
+    imetaMedia?: ImetaMedia[];
+  } | null;
+  isSending?: boolean;
+  mediaController?: MediaUploadController;
+  onCancelEdit?: () => void;
+  onCancelReply?: () => void;
+  /**
+   * Invoked when the user presses ↑ in an empty composer that is not already
+   * in edit mode. The owner should locate the most recent message authored by
+   * the current user within this composer's scope (main timeline, DM, or
+   * thread) and enter edit mode for it. Return `true` if a target was found
+   * and edit mode was entered, so the composer can swallow the keystroke;
+   * return `false` to let the arrow key fall through normally.
+   */
+  onEditLastOwnMessage?: () => boolean;
+  onEditSave?: (
+    content: string,
+    mediaTags?: string[][],
+    mentionPubkeys?: string[],
+  ) => Promise<void>;
+  /** Captures send context synchronously before awaits can change navigation. */
+  onCaptureSendContext?: () => {
+    parentEventId: string | null;
+    threadHeadId: string | null;
+  } | null;
+  onPrepareSendChannel?: (pubkeys?: string[]) => Promise<string | null>;
+  onPreparingMentionSendChange?: (isPreparing: boolean) => void;
+  onSend: (
+    content: string,
+    mentionPubkeys: string[],
+    mediaTags?: string[][],
+    channelId?: string | null,
+    threadContext?: {
+      parentEventId: string | null;
+      threadHeadId: string | null;
+    } | null,
+  ) => Promise<void>;
+  placeholder?: string;
+  profiles?: UserProfileLookup;
+  replyTarget?: {
+    author: string;
+    body: string;
+    id: string;
+  } | null;
+  showTopBorder?: boolean;
+  toolbarExtraActions?: ReactNode;
+  typingParentEventId?: string | null;
+  typingRootEventId?: string | null;
+};
diff --git a/desktop/src/features/messages/ui/MessageThreadPanel.tsx b/desktop/src/features/messages/ui/MessageThreadPanel.tsx
index ddf9b9dda1..59c92c7a69 100644
--- a/desktop/src/features/messages/ui/MessageThreadPanel.tsx
+++ b/desktop/src/features/messages/ui/MessageThreadPanel.tsx
@@ -38,6 +38,8 @@ import {
 import { Button } from "@/shared/ui/button";
 import { Separator } from "@/shared/ui/separator";
 import type { VideoReviewContext } from "@/shared/ui/VideoPlayer";
+import { ComposerActivityAccessory } from "./ComposerActivityAccessory";
+import { ComposerDockBackdrop } from "./ComposerDockBackdrop";
 import { MessageComposer } from "./MessageComposer";
 import { ThreadMessageSkeleton } from "./MessageThreadPanelSkeleton";
 import { MessageRow, type ThreadDepthGuideAction } from "./MessageRow";
@@ -107,7 +109,8 @@ type MessageThreadPanelProps = ThreadPanelLayoutProps & {
   threadReplyUnreadCounts?: ReadonlyMap<string, number>;
   threadTypingPubkeys: string[];
   threadHeadVideoReviewContext?: VideoReviewContext;
-  toolbarExtraActions?: React.ReactNode;
+  activityAccessoryContent?: React.ReactNode;
+  activityAccessoryVisible: boolean;
   widthPx: number;
   isFollowingThread?: boolean;
   isMessageUnreadById?: (messageId: string) => boolean;
@@ -224,7 +227,8 @@ export function MessageThreadPanel({
   threadUnreadCount,
   threadReplyUnreadCounts,
   threadTypingPubkeys,
-  toolbarExtraActions,
+  activityAccessoryContent,
+  activityAccessoryVisible,
   widthPx,
   transparentChrome = false,
   autoSendDraftKey = null,
@@ -243,6 +247,10 @@ export function MessageThreadPanel({
   const threadHeadId = threadHead?.id ?? null;
   useEscapeKey(onClose, isOverlay || isSinglePanelView || isFocusMode);
   const hasConstrainedColumn = columnMaxWidthPx != null;
+  // Whether the composer dock trades its quiet-state spacer for the
+  // conditional activity accessory (agent working and/or someone typing).
+  const hasComposerBottomActivity =
+    activityAccessoryVisible || threadTypingPubkeys.length > 0;
   useComposerHeightPadding(
     threadBodyRef,
     threadComposerWrapperRef,
@@ -820,65 +828,75 @@ export function MessageThreadPanel({
         ref={threadComposerWrapperRef}
       >
         <div
-          className={cn(
-            "composer-overlay-corner-masks pointer-events-auto",
-            hasConstrainedColumn && THREAD_PANEL_COLUMN_CLASS,
-          )}
+          className={cn(hasConstrainedColumn && THREAD_PANEL_COLUMN_CLASS)}
           style={
             hasConstrainedColumn ? { maxWidth: columnMaxWidthPx } : undefined
           }
         >
-          <MessageComposer
-            audienceContext={{
-              type: "thread",
-              threadRootId: threadHead.id,
-              initialAgentPubkeys,
-            }}
-            channelId={channelId}
-            channelName={channelName}
-            channelType={channel?.channelType ?? null}
-            containerClassName={THREAD_PANEL_COMPOSER_GUTTER_CLASS}
-            disabled={disabled || isSending || !channelId}
-            draftKey={`thread:${threadHead.id}`}
-            autoSubmitDraftKey={autoSendDraftKey}
-            onAutoSubmitComplete={onAutoSubmitComplete}
-            editTarget={editTarget}
-            isSending={isSending}
-            onCancelEdit={onCancelEdit}
-            onCancelReply={composerReplyTarget ? onCancelReply : undefined}
-            onCaptureSendContext={onCaptureSendContext}
-            onEditLastOwnMessage={onEditLastOwnMessage}
-            onEditSave={onEditSave}
-            onSend={onSend}
-            placeholder={`Reply in thread to ${threadHead.author}`}
-            profiles={profiles}
-            replyTarget={composerReplyTarget}
-            typingParentEventId={threadHead.id}
-            typingRootEventId={threadHead.rootId}
-          />
           <div
             className={cn(
-              "min-h-8 bg-background pb-1.5 pt-0",
-              THREAD_PANEL_COMPOSER_GUTTER_CLASS,
+              "composer-dock composer-overlay-corner-masks relative pointer-events-auto",
+              hasComposerBottomActivity && "composer-dock--with-activity",
             )}
           >
-            <div className="mx-auto flex h-full w-full max-w-4xl items-center gap-2 overflow-visible">
-              {toolbarExtraActions ? (
-                <div className="flex min-w-0 flex-1 overflow-visible">
-                  {toolbarExtraActions}
-                </div>
-              ) : null}
-              {threadTypingPubkeys.length > 0 ? (
-                <TypingIndicatorRow
-                  channel={channel}
-                  className="min-w-0 flex-1 py-0 pl-[calc(0.75rem+1px)] pr-0 sm:pl-[calc(1rem+1px)]"
-                  currentPubkey={currentPubkey}
-                  profiles={profiles}
-                  typingPubkeys={threadTypingPubkeys}
-                  variant="activity"
-                />
-              ) : null}
-            </div>
+            <ComposerDockBackdrop gutterClassName="inset-x-5" />
+            <MessageComposer
+              audienceContext={{
+                type: "thread",
+                threadRootId: threadHead.id,
+                initialAgentPubkeys,
+              }}
+              channelId={channelId}
+              channelName={channelName}
+              channelType={channel?.channelType ?? null}
+              containerClassName={cn(
+                THREAD_PANEL_COMPOSER_GUTTER_CLASS,
+                "pb-0",
+              )}
+              layoutMode="dock"
+              disabled={disabled || isSending || !channelId}
+              draftKey={`thread:${threadHead.id}`}
+              autoSubmitDraftKey={autoSendDraftKey}
+              onAutoSubmitComplete={onAutoSubmitComplete}
+              editTarget={editTarget}
+              isSending={isSending}
+              onCancelEdit={onCancelEdit}
+              onCancelReply={composerReplyTarget ? onCancelReply : undefined}
+              onCaptureSendContext={onCaptureSendContext}
+              onEditLastOwnMessage={onEditLastOwnMessage}
+              onEditSave={onEditSave}
+              onSend={onSend}
+              placeholder={`Reply in thread to ${threadHead.author}`}
+              profiles={profiles}
+              replyTarget={composerReplyTarget}
+              typingParentEventId={threadHead.id}
+              typingRootEventId={threadHead.rootId}
+            />
+            {/* The activity accessory is anchored in the dock's reserved bottom
+              rail, so fading it cannot change the observed overlay height or
+              move the conversation. Its natural content height remains responsive. */}
+            <ComposerActivityAccessory
+              className={THREAD_PANEL_COMPOSER_GUTTER_CLASS}
+              visible={hasComposerBottomActivity}
+            >
+              <div className="mx-auto flex w-full max-w-4xl items-center gap-2 overflow-visible pl-2">
+                {activityAccessoryVisible && activityAccessoryContent ? (
+                  <div className="flex min-w-0 flex-1 overflow-visible">
+                    {activityAccessoryContent}
+                  </div>
+                ) : null}
+                {threadTypingPubkeys.length > 0 ? (
+                  <TypingIndicatorRow
+                    channel={channel}
+                    className="min-w-0 flex-1 py-0 pl-[calc(0.75rem+1px)] pr-0 sm:pl-[calc(1rem+1px)]"
+                    currentPubkey={currentPubkey}
+                    profiles={profiles}
+                    typingPubkeys={threadTypingPubkeys}
+                    variant="activity"
+                  />
+                ) : null}
+              </div>
+            </ComposerActivityAccessory>
           </div>
         </div>
       </div>
diff --git a/desktop/src/features/messages/ui/MessageTimeline.tsx b/desktop/src/features/messages/ui/MessageTimeline.tsx
index 73526da5e8..cc5fb1e3dc 100644
--- a/desktop/src/features/messages/ui/MessageTimeline.tsx
+++ b/desktop/src/features/messages/ui/MessageTimeline.tsx
@@ -32,6 +32,7 @@ import { useSettleGatedPrependMessages } from "./useSettleGatedPrependMessages";
 
 export type MessageTimelineHandle = {
   scrollToBottomOnNextUpdate: () => void;
+  settleAtBottom: () => boolean;
 };
 
 type MessageTimelineProps = {
@@ -433,8 +434,13 @@ const MessageTimelineBase = React.forwardRef<
     ref,
     () => ({
       scrollToBottomOnNextUpdate: prepareForOwnMessage,
+      settleAtBottom: () => {
+        if (!timelineVirtualizerApi) return false;
+        scrollToBottom("auto");
+        return true;
+      },
     }),
-    [prepareForOwnMessage],
+    [prepareForOwnMessage, scrollToBottom, timelineVirtualizerApi],
   );
 
   // Jump-to-message is purely DOM-based now: all loaded rows are mounted, so
diff --git a/desktop/src/features/messages/ui/TypingIndicatorRow.tsx b/desktop/src/features/messages/ui/TypingIndicatorRow.tsx
index efb5b9ef09..ef9a8f1846 100644
--- a/desktop/src/features/messages/ui/TypingIndicatorRow.tsx
+++ b/desktop/src/features/messages/ui/TypingIndicatorRow.tsx
@@ -79,9 +79,7 @@ export function TypingIndicatorRow({
       aria-live="polite"
       className={cn(
         "shrink-0 bg-transparent",
-        isActivityVariant
-          ? "flex h-7 items-center px-0 py-0"
-          : "px-4 py-2 sm:px-6",
+        isActivityVariant ? "flex items-center px-0 py-0" : "px-4 py-2 sm:px-6",
         className,
       )}
       {...(labels.length > 0
diff --git a/desktop/src/features/messages/ui/anchoredScrollPolicy.ts b/desktop/src/features/messages/ui/anchoredScrollPolicy.ts
new file mode 100644
index 0000000000..5dfec80b83
--- /dev/null
+++ b/desktop/src/features/messages/ui/anchoredScrollPolicy.ts
@@ -0,0 +1,71 @@
+import type { TimelineMessageDelta } from "@/features/messages/lib/timelineSnapshot";
+
+export function getPinnedCenterDrift({
+  contentTop,
+  currentContentTop,
+}: {
+  contentTop: number;
+  currentContentTop: number;
+}): number | null {
+  const drift = currentContentTop - contentTop;
+  return Math.abs(drift) > 0.5 ? drift : null;
+}
+
+export function shouldIgnorePinnedCenterScroll({
+  currentScrollTop,
+  expectedScrollTop,
+  isWritingScroll,
+}: {
+  currentScrollTop: number;
+  expectedScrollTop: number | null;
+  isWritingScroll: boolean;
+}): boolean {
+  return isWritingScroll || expectedScrollTop === currentScrollTop;
+}
+
+// Programmatic bottom pins require the physical floor, not merely the looser
+// UI at-bottom threshold used for unread affordances.
+const TRUE_BOTTOM_THRESHOLD_PX = 1;
+
+type BottomSettleContainer = Pick<
+  HTMLDivElement,
+  "scrollHeight" | "clientHeight" | "scrollTop" | "scrollTo"
+>;
+
+export function settleProgrammaticBottomPin(
+  container: BottomSettleContainer,
+): boolean {
+  container.scrollTo({ top: container.scrollHeight, behavior: "auto" });
+  return (
+    container.scrollHeight - container.clientHeight - container.scrollTop <=
+    TRUE_BOTTOM_THRESHOLD_PX
+  );
+}
+
+export function shouldSettleForSplitPanel({
+  isAtBottom,
+  splitPanelOpen,
+}: {
+  isAtBottom: boolean;
+  splitPanelOpen: boolean;
+}): boolean {
+  return isAtBottom && splitPanelOpen;
+}
+
+export function shouldSettleVirtualizedBottom({
+  isAtBottom,
+  messageDelta,
+  messagesArrived,
+  messagesChanged,
+}: {
+  isAtBottom: boolean;
+  messageDelta: TimelineMessageDelta;
+  messagesArrived: number;
+  messagesChanged: boolean;
+}): boolean {
+  return (
+    isAtBottom &&
+    messageDelta !== "prepend" &&
+    (messagesArrived > 0 || messagesChanged)
+  );
+}
diff --git a/desktop/src/features/messages/ui/useAnchoredScroll.test.mjs b/desktop/src/features/messages/ui/useAnchoredScroll.test.mjs
index ba1acb7aa6..28273f08bb 100644
--- a/desktop/src/features/messages/ui/useAnchoredScroll.test.mjs
+++ b/desktop/src/features/messages/ui/useAnchoredScroll.test.mjs
@@ -7,7 +7,7 @@ import {
   shouldIgnorePinnedCenterScroll,
   shouldSettleForSplitPanel,
   shouldSettleVirtualizedBottom,
-} from "./useAnchoredScroll.ts";
+} from "./anchoredScrollPolicy.ts";
 
 function fakeContainer({ clientHeight, scrollHeight, scrollTop }) {
   const writes = [];
diff --git a/desktop/src/features/messages/ui/useAnchoredScroll.ts b/desktop/src/features/messages/ui/useAnchoredScroll.ts
index 1ed1a6741e..ead5771294 100644
--- a/desktop/src/features/messages/ui/useAnchoredScroll.ts
+++ b/desktop/src/features/messages/ui/useAnchoredScroll.ts
@@ -1,9 +1,14 @@
 import * as React from "react";
 
+import { classifyTimelineMessageDelta } from "@/features/messages/lib/timelineSnapshot";
 import {
-  classifyTimelineMessageDelta,
-  type TimelineMessageDelta,
-} from "@/features/messages/lib/timelineSnapshot";
+  getPinnedCenterDrift,
+  settleProgrammaticBottomPin,
+  shouldIgnorePinnedCenterScroll,
+  shouldSettleForSplitPanel,
+  shouldSettleVirtualizedBottom,
+} from "./anchoredScrollPolicy";
+import { useVirtualizedViewportResize } from "./useVirtualizedViewportResize";
 
 /**
  * Distance (in CSS pixels) below which we consider the scroll position
@@ -12,81 +17,12 @@ import {
  * rounding from the layout engine.
  */
 const AT_BOTTOM_THRESHOLD_PX = 32;
-// Tests and user-visible "pinned" affordances need the view at the physical
-// floor, not merely within the looser UI at-bottom threshold. The loose
-// threshold decides whether the user is close enough to count as reading the
-// latest message; this strict threshold decides when a programmatic bottom pin
-// has actually finished settling.
-const TRUE_BOTTOM_THRESHOLD_PX = 1;
 
 type AnchorState =
   | { kind: "at-bottom" }
   | { kind: "message"; messageId: string; topOffset: number }
   | { kind: "pinned-center"; messageId: string; contentTop: number };
 
-export function getPinnedCenterDrift({
-  contentTop,
-  currentContentTop,
-}: {
-  contentTop: number;
-  currentContentTop: number;
-}): number | null {
-  const drift = currentContentTop - contentTop;
-  return Math.abs(drift) > 0.5 ? drift : null;
-}
-
-export function shouldIgnorePinnedCenterScroll({
-  currentScrollTop,
-  expectedScrollTop,
-  isWritingScroll,
-}: {
-  currentScrollTop: number;
-  expectedScrollTop: number | null;
-  isWritingScroll: boolean;
-}): boolean {
-  return isWritingScroll || expectedScrollTop === currentScrollTop;
-}
-
-type BottomSettleContainer = Pick<
-  HTMLDivElement,
-  "scrollHeight" | "clientHeight" | "scrollTop" | "scrollTo"
->;
-
-export function settleProgrammaticBottomPin(
-  container: BottomSettleContainer,
-): boolean {
-  container.scrollTo({ top: container.scrollHeight, behavior: "auto" });
-  return isAtTrueBottom(container);
-}
-
-export function shouldSettleForSplitPanel({
-  isAtBottom,
-  splitPanelOpen,
-}: {
-  isAtBottom: boolean;
-  splitPanelOpen: boolean;
-}): boolean {
-  return isAtBottom && splitPanelOpen;
-}
-
-export function shouldSettleVirtualizedBottom({
-  isAtBottom,
-  messageDelta,
-  messagesArrived,
-  messagesChanged,
-}: {
-  isAtBottom: boolean;
-  messageDelta: TimelineMessageDelta;
-  messagesArrived: number;
-  messagesChanged: boolean;
-}): boolean {
-  return (
-    isAtBottom &&
-    messageDelta !== "prepend" &&
-    (messagesArrived > 0 || messagesChanged)
-  );
-}
-
 type UseAnchoredScrollOptions = {
   /** Scroll container. Owned by the parent so external refs still compose. */
   scrollContainerRef: React.RefObject<HTMLDivElement | null>;
@@ -162,18 +98,6 @@ function isAtBottomNow(
   );
 }
 
-function isAtTrueBottom(
-  container: Pick<
-    HTMLDivElement,
-    "scrollHeight" | "clientHeight" | "scrollTop"
-  >,
-) {
-  return (
-    container.scrollHeight - container.clientHeight - container.scrollTop <=
-    TRUE_BOTTOM_THRESHOLD_PX
-  );
-}
-
 /**
  * Pick an anchor for the current scroll position.
  *
@@ -846,6 +770,12 @@ export function useAnchoredScroll({
     virtualizerOwnsPrependAnchoring,
   ]);
 
+  useVirtualizedViewportResize(
+    scrollContainerRef,
+    virtualizerAtBottomRef,
+    virtualizerOwnsPrependAnchoring ? virtualSettleAtBottom : undefined,
+  );
+
   // Pinned centers survive our own corrections but release as soon as the
   // reader deliberately takes control of the scroll position or the caller
   // retires the temporary target after layout settlement.
diff --git a/desktop/src/features/messages/ui/useComposerHeightPadding.test.mjs b/desktop/src/features/messages/ui/useComposerHeightPadding.test.mjs
new file mode 100644
index 0000000000..23bfa90153
--- /dev/null
+++ b/desktop/src/features/messages/ui/useComposerHeightPadding.test.mjs
@@ -0,0 +1,31 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+
+import { shouldUseComposerPaddingFallback } from "./useComposerHeightPadding.ts";
+
+test("composer padding fallback follows initial measurement and growth", () => {
+  assert.equal(
+    shouldUseComposerPaddingFallback({
+      nextPadding: 100,
+      previousPadding: null,
+    }),
+    true,
+  );
+  assert.equal(
+    shouldUseComposerPaddingFallback({
+      nextPadding: 120,
+      previousPadding: 100,
+    }),
+    true,
+  );
+});
+
+test("composer padding fallback does not force-scroll on shrink", () => {
+  assert.equal(
+    shouldUseComposerPaddingFallback({
+      nextPadding: 100,
+      previousPadding: 120,
+    }),
+    false,
+  );
+});
diff --git a/desktop/src/features/messages/ui/useComposerHeightPadding.ts b/desktop/src/features/messages/ui/useComposerHeightPadding.ts
index c4f9beb3ec..9990ce5066 100644
--- a/desktop/src/features/messages/ui/useComposerHeightPadding.ts
+++ b/desktop/src/features/messages/ui/useComposerHeightPadding.ts
@@ -2,20 +2,35 @@ import * as React from "react";
 
 import { observeElementBlockSize } from "@/shared/layout/observeElementBlockSize";
 
+export function shouldUseComposerPaddingFallback({
+  nextPadding,
+  previousPadding,
+}: {
+  nextPadding: number;
+  previousPadding: number | null;
+}): boolean {
+  return previousPadding === null || nextPadding > previousPadding;
+}
+
 /**
  * Observes the height of the composer overlay and sets the scroll
  * container's `paddingBottom` to match, so content is never hidden
  * behind the absolutely-positioned composer.
  *
- * If the user is already scrolled to the bottom when padding increases,
- * auto-scrolls to keep them at the bottom (no visible gap).
+ * If the reader is already near the bottom, the legacy fallback follows only
+ * initial measurement and growth. Consumers with semantic bottom ownership may
+ * provide `settleAtBottom` to handle both growth and shrink safely.
  */
 export function useComposerHeightPadding(
   scrollContainerRef: React.RefObject<HTMLElement | null>,
   composerRef: React.RefObject<HTMLElement | null>,
   resetKey?: unknown,
   mode: "padding" | "css-variable" = "padding",
+  settleAtBottom?: () => boolean,
 ) {
+  const settleAtBottomRef = React.useRef(settleAtBottom);
+  settleAtBottomRef.current = settleAtBottom;
+
   React.useEffect(() => {
     void resetKey;
     const scrollEl = scrollContainerRef.current;
@@ -70,10 +85,18 @@ export function useComposerHeightPadding(
       }
       lastPadding = padding;
 
-      if (
-        wasAtBottom &&
-        (previousPadding === null || padding > previousPadding)
-      ) {
+      if (wasAtBottom && previousPadding !== padding) {
+        if (settleAtBottomRef.current?.()) {
+          return;
+        }
+        if (
+          !shouldUseComposerPaddingFallback({
+            nextPadding: padding,
+            previousPadding,
+          })
+        ) {
+          return;
+        }
         followBottom();
         if (followBottomFrame !== null) {
           cancelAnimationFrame(followBottomFrame);
diff --git a/desktop/src/features/messages/ui/useVirtualizedViewportResize.test.mjs b/desktop/src/features/messages/ui/useVirtualizedViewportResize.test.mjs
new file mode 100644
index 0000000000..e284460c17
--- /dev/null
+++ b/desktop/src/features/messages/ui/useVirtualizedViewportResize.test.mjs
@@ -0,0 +1,15 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+
+import { shouldSettleVirtualizedViewportResize } from "./useVirtualizedViewportResize.ts";
+
+test("viewport resize follows the virtualizer's explicit bottom state", () => {
+  assert.equal(
+    shouldSettleVirtualizedViewportResize({ virtualizerAtBottom: true }),
+    true,
+  );
+  assert.equal(
+    shouldSettleVirtualizedViewportResize({ virtualizerAtBottom: false }),
+    false,
+  );
+});
diff --git a/desktop/src/features/messages/ui/useVirtualizedViewportResize.ts b/desktop/src/features/messages/ui/useVirtualizedViewportResize.ts
new file mode 100644
index 0000000000..d3273a09b6
--- /dev/null
+++ b/desktop/src/features/messages/ui/useVirtualizedViewportResize.ts
@@ -0,0 +1,39 @@
+import * as React from "react";
+
+export function shouldSettleVirtualizedViewportResize({
+  virtualizerAtBottom,
+}: {
+  virtualizerAtBottom: boolean;
+}): boolean {
+  return virtualizerAtBottom;
+}
+
+/** Re-settles a bottom-pinned virtualized timeline after viewport reflow. */
+export function useVirtualizedViewportResize(
+  scrollContainerRef: React.RefObject<HTMLDivElement | null>,
+  virtualizerAtBottomRef: React.RefObject<boolean>,
+  settleAtBottom?: () => void,
+) {
+  React.useEffect(() => {
+    const container = scrollContainerRef.current;
+    if (
+      !container ||
+      !settleAtBottom ||
+      typeof ResizeObserver === "undefined"
+    ) {
+      return;
+    }
+
+    const observer = new ResizeObserver(() => {
+      if (
+        shouldSettleVirtualizedViewportResize({
+          virtualizerAtBottom: virtualizerAtBottomRef.current,
+        })
+      ) {
+        settleAtBottom();
+      }
+    });
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, [scrollContainerRef, settleAtBottom, virtualizerAtBottomRef]);
+}
diff --git a/desktop/src/shared/styles/globals/animations.css b/desktop/src/shared/styles/globals/animations.css
index 59a5c9b4b4..77ae157373 100644
--- a/desktop/src/shared/styles/globals/animations.css
+++ b/desktop/src/shared/styles/globals/animations.css
@@ -187,54 +187,58 @@
 }
 
 .buzz-shimmer {
-  --buzz-shimmer-duration: 2000ms;
-  --buzz-shimmer-band: 400%;
+  --buzz-shimmer-duration: 2600ms;
+  --buzz-shimmer-band: 250%;
   --buzz-shimmer-highlight: color-mix(
     in srgb,
-    hsl(var(--foreground)) 82%,
-    hsl(var(--muted-foreground)) 18%
+    hsl(var(--background)) 60%,
+    hsl(var(--muted-foreground)) 40%
   );
+  --buzz-shimmer-spread: 2rem;
 
-  color: hsl(var(--muted-foreground));
-  display: inline-block;
-  position: relative;
-}
-
-.buzz-shimmer::before {
   animation: buzz-shimmer var(--buzz-shimmer-duration) linear infinite;
   background-clip: text;
-  background-image: linear-gradient(
-    90deg,
-    transparent 0%,
-    transparent 40%,
-    var(--buzz-shimmer-highlight) 50%,
-    transparent 60%,
-    transparent 100%
-  );
+  background-image:
+    linear-gradient(
+      90deg,
+      transparent calc(50% - var(--buzz-shimmer-spread)),
+      var(--buzz-shimmer-highlight) 50%,
+      transparent calc(50% + var(--buzz-shimmer-spread))
+    ),
+    linear-gradient(hsl(var(--muted-foreground)), hsl(var(--muted-foreground)));
+  background-position:
+    100% 0,
+    0 0;
   background-repeat: no-repeat;
-  background-size: var(--buzz-shimmer-band) 100%;
+  background-size:
+    var(--buzz-shimmer-band) 100%,
+    100% 100%;
   color: transparent;
-  content: attr(data-shimmer-text);
-  inset: 0;
-  pointer-events: none;
-  position: absolute;
+  display: inline-block;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }
 
 @keyframes buzz-shimmer {
   0% {
-    background-position: 100% 0;
+    background-position:
+      100% 0,
+      0 0;
   }
 
   100% {
-    background-position: 0% 0;
+    background-position:
+      0 0,
+      0 0;
   }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .buzz-shimmer::before {
+  .buzz-shimmer {
     animation: none;
+    background: none;
+    color: hsl(var(--muted-foreground));
+    -webkit-text-fill-color: currentcolor;
   }
 }
 
diff --git a/desktop/src/shared/styles/globals/composer.css b/desktop/src/shared/styles/globals/composer.css
index 912ed1c799..0af4a59b4f 100644
--- a/desktop/src/shared/styles/globals/composer.css
+++ b/desktop/src/shared/styles/globals/composer.css
@@ -1,12 +1,67 @@
+.composer-dock {
+  --composer-dock-active-rail: 2.125rem;
+  --composer-dock-activity-bottom: 0.5rem;
+  --composer-dock-quiet-inset: 1.25rem;
+  --composer-dock-release: calc(
+    var(--composer-dock-active-rail) -
+    var(--composer-dock-quiet-inset)
+  );
+
+  padding-bottom: var(--composer-dock-quiet-inset);
+  transition: padding-bottom 200ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+.composer-dock--with-activity {
+  padding-bottom: var(--composer-dock-active-rail);
+}
+
+.composer-dock-quiet-spacer {
+  height: var(--composer-dock-release);
+  transition: height 200ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+.composer-dock--with-activity .composer-dock-quiet-spacer {
+  height: 0;
+}
+
+.composer-dock-rail-mask {
+  height: var(--composer-dock-quiet-inset);
+  transition: height 200ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+.composer-dock--with-activity .composer-dock-rail-mask {
+  height: var(--composer-dock-active-rail);
+}
+
+.composer-dock-activity {
+  bottom: var(--composer-dock-activity-bottom);
+}
+
 .composer-overlay-corner-masks::before,
 .composer-overlay-corner-masks::after {
   position: absolute;
-  bottom: 2.5rem;
+  bottom: var(--composer-dock-quiet-inset);
   z-index: 0;
   width: 1rem;
   height: 1rem;
   background: hsl(var(--background));
   content: "";
+  transition: bottom 200ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+.composer-dock--with-activity.composer-overlay-corner-masks::before,
+.composer-dock--with-activity.composer-overlay-corner-masks::after {
+  bottom: var(--composer-dock-active-rail);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .composer-dock,
+  .composer-dock-quiet-spacer,
+  .composer-dock-rail-mask,
+  .composer-overlay-corner-masks::before,
+  .composer-overlay-corner-masks::after {
+    transition: none;
+  }
 }
 
 .composer-overlay-corner-masks::before {
diff --git a/desktop/src/shared/ui/Shimmer.tsx b/desktop/src/shared/ui/Shimmer.tsx
index f9b543ef09..0b26ed032f 100644
--- a/desktop/src/shared/ui/Shimmer.tsx
+++ b/desktop/src/shared/ui/Shimmer.tsx
@@ -1,3 +1,5 @@
+import type { CSSProperties } from "react";
+
 import { cn } from "@/shared/lib/cn";
 
 type ShimmerProps = {
@@ -9,7 +11,9 @@ export function Shimmer({ children, className }: ShimmerProps) {
   return (
     <span
       className={cn("buzz-shimmer", className)}
-      data-shimmer-text={children}
+      style={
+        { "--buzz-shimmer-spread": `${children.length * 2}px` } as CSSProperties
+      }
     >
       {children}
     </span>
diff --git a/desktop/src/shared/ui/UserAvatar.tsx b/desktop/src/shared/ui/UserAvatar.tsx
index 1ef1a9b815..dbe5eef27e 100644
--- a/desktop/src/shared/ui/UserAvatar.tsx
+++ b/desktop/src/shared/ui/UserAvatar.tsx
@@ -20,6 +20,7 @@ type UserAvatarProps = {
   size?: UserAvatarSize;
   accent?: boolean;
   className?: string;
+  fallbackDelayMs?: number;
   testId?: string;
 };
 
@@ -29,6 +30,7 @@ export function UserAvatar({
   size = "md",
   accent = false,
   className,
+  fallbackDelayMs = 200,
   testId,
 }: UserAvatarProps) {
   const initials = getInitials(displayName);
@@ -67,7 +69,7 @@ export function UserAvatar({
             : "bg-secondary text-secondary-foreground",
         )}
         data-testid={testId ? `${testId}-fallback` : undefined}
-        delayMs={200}
+        delayMs={fallbackDelayMs}
       >
         {initials}
       </AvatarFallback>
diff --git a/desktop/src/testing/e2eBridge.ts b/desktop/src/testing/e2eBridge.ts
index 23c924baf0..03c05fe877 100644
--- a/desktop/src/testing/e2eBridge.ts
+++ b/desktop/src/testing/e2eBridge.ts
@@ -1022,7 +1022,9 @@ declare global {
     }) => RelayEvent[];
     __BUZZ_E2E_EMIT_MOCK_TYPING__?: (input: {
       channelName: string;
+      createdAt?: number;
       pubkey?: string;
+      threadHeadId?: string;
     }) => RelayEvent;
     __BUZZ_E2E_INVOKE_MOCK_COMMAND__?: (
       command: string,
@@ -4030,13 +4032,21 @@ function emitMockChannelMessage(
   return event;
 }
 
-function emitMockTypingIndicator(channelId: string, pubkey: string) {
+function emitMockTypingIndicator(
+  channelId: string,
+  pubkey: string,
+  threadHeadId?: string,
+  createdAt?: number,
+) {
   const event: RelayEvent = {
     id: crypto.randomUUID().replace(/-/g, ""),
     pubkey,
-    created_at: Math.floor(Date.now() / 1000),
+    created_at: createdAt ?? Math.floor(Date.now() / 1000),
     kind: 20002,
-    tags: [["h", channelId]],
+    tags: [
+      ["h", channelId],
+      ...(threadHeadId ? [["e", threadHeadId, "", "reply"]] : []),
+    ],
     content: "",
     sig: "mocksig".repeat(20).slice(0, 128),
   };
@@ -9179,7 +9189,12 @@ export function maybeInstallE2eTauriMocks() {
     );
   };
   window.__BUZZ_E2E_PREPEND_MOCK_HISTORY__ = prependMockHistory;
-  window.__BUZZ_E2E_EMIT_MOCK_TYPING__ = ({ channelName, pubkey }) => {
+  window.__BUZZ_E2E_EMIT_MOCK_TYPING__ = ({
+    channelName,
+    createdAt,
+    pubkey,
+    threadHeadId,
+  }) => {
     const channel = mockChannels.find(
       (candidate) => candidate.name === channelName,
     );
@@ -9187,7 +9202,12 @@ export function maybeInstallE2eTauriMocks() {
       throw new Error(`Mock channel ${channelName} not found.`);
     }
 
-    return emitMockTypingIndicator(channel.id, pubkey ?? CHARLIE_PUBKEY);
+    return emitMockTypingIndicator(
+      channel.id,
+      pubkey ?? CHARLIE_PUBKEY,
+      threadHeadId,
+      createdAt,
+    );
   };
   window.__BUZZ_E2E_HAS_MOCK_LIVE_SUBSCRIPTION__ = ({ channelName, kind }) => {
     const channel = mockChannels.find(
diff --git a/desktop/tests/e2e/channel-composer-overflow.spec.ts b/desktop/tests/e2e/channel-composer-overflow.spec.ts
index 149a4247a6..6ba13532a9 100644
--- a/desktop/tests/e2e/channel-composer-overflow.spec.ts
+++ b/desktop/tests/e2e/channel-composer-overflow.spec.ts
@@ -1,7 +1,7 @@
 import { expect, test } from "@playwright/test";
 
 import { waitForAnimations } from "../helpers/animations";
-import { installMockBridge } from "../helpers/bridge";
+import { installMockBridge, TEST_IDENTITIES } from "../helpers/bridge";
 
 // The channel and thread composers float over their conversation scrollers.
 // When the conversation is scrolled up, later rows pass underneath the
@@ -10,19 +10,22 @@ import { installMockBridge } from "../helpers/bridge";
 // letting them bleed out below the composer box.
 
 const CHANNEL = "general";
+const TYPING_KIND = 20002;
 
 async function waitForMockLiveSubscription(
   page: import("@playwright/test").Page,
   channelName: string,
+  kind?: number,
 ) {
   await expect
     .poll(() =>
       page.evaluate(
-        (ch) =>
+        ({ channelName, kind }) =>
           window.__BUZZ_E2E_HAS_MOCK_LIVE_SUBSCRIPTION__?.({
-            channelName: ch,
+            channelName,
+            kind,
           }) ?? false,
-        channelName,
+        { channelName, kind },
       ),
     )
     .toBe(true);
@@ -43,7 +46,38 @@ async function emit(
     { channel: CHANNEL, content, parentEventId },
   );
   if (!event) throw new Error("mock message emitter is not installed");
-  return event as { id: string };
+  return event as { created_at: number; id: string };
+}
+
+type ComposerDockGeometry = {
+  composerBottom: number;
+  composerLeft: number;
+  composerRight: number;
+  composerTop: number;
+  dockHeight: number;
+  dockTop: number;
+};
+
+async function composerDockGeometry(
+  overlay: import("@playwright/test").Locator,
+): Promise<ComposerDockGeometry> {
+  return overlay.evaluate((element) => {
+    const composer = element.querySelector<HTMLElement>(
+      '[data-testid="message-composer"]',
+    );
+    const dock = element.querySelector<HTMLElement>(".composer-dock");
+    if (!composer || !dock) throw new Error("Missing composer dock geometry");
+    const composerRect = composer.getBoundingClientRect();
+    const dockRect = dock.getBoundingClientRect();
+    return {
+      composerBottom: composerRect.bottom,
+      composerLeft: composerRect.left,
+      composerRight: composerRect.right,
+      composerTop: composerRect.top,
+      dockHeight: dockRect.height,
+      dockTop: dockRect.top,
+    };
+  });
 }
 
 async function expectOverlayBottomMask(
@@ -130,6 +164,119 @@ test.describe("composer overlays mask scrolled content", () => {
     await expectOverlayBottomMask(page.getByTestId("channel-composer-overlay"));
   });
 
+  test("activity trades composer height without moving the dock", async ({
+    page,
+  }) => {
+    await installMockBridge(page);
+    await page.goto("/");
+    await page.getByTestId(`channel-${CHANNEL}`).click();
+    await waitForMockLiveSubscription(page, CHANNEL);
+    await waitForMockLiveSubscription(page, CHANNEL, TYPING_KIND);
+
+    const overlay = page.getByTestId("channel-composer-overlay");
+    const input = overlay.getByTestId("message-input");
+    await input.fill(
+      "A multiline draft that grows the composer.\nSecond line keeps the natural-height path active.",
+    );
+    await waitForAnimations(page);
+    const quiet = await composerDockGeometry(overlay);
+
+    await page.evaluate((channelName) => {
+      window.__BUZZ_E2E_EMIT_MOCK_TYPING__?.({ channelName });
+    }, CHANNEL);
+    await expect(
+      overlay.getByTestId("channel-composer-activity-row"),
+    ).toBeVisible();
+    await waitForAnimations(page);
+    const active = await composerDockGeometry(overlay);
+
+    expect(Math.abs(active.dockTop - quiet.dockTop)).toBeLessThanOrEqual(0.5);
+    expect(Math.abs(active.dockHeight - quiet.dockHeight)).toBeLessThanOrEqual(
+      0.5,
+    );
+    expect(
+      Math.abs(active.composerTop - quiet.composerTop),
+    ).toBeLessThanOrEqual(0.5);
+    expect(active.composerBottom).toBeLessThan(quiet.composerBottom - 8);
+  });
+
+  test("reduced motion removes dock geometry transitions", async ({ page }) => {
+    await page.emulateMedia({ reducedMotion: "reduce" });
+    await installMockBridge(page);
+    await page.goto("/");
+    await page.getByTestId(`channel-${CHANNEL}`).click();
+
+    const dock = page
+      .getByTestId("channel-composer-overlay")
+      .locator(".composer-dock");
+    const spacer = dock.locator(".composer-dock-quiet-spacer");
+    await expect(dock).toHaveCSS("transition-duration", "0s");
+    await expect(spacer).toHaveCSS("transition-duration", "0s");
+  });
+
+  test("bottom-pinned messages clear a growing composer", async ({ page }) => {
+    await installMockBridge(page);
+    await page.goto("/");
+    await page.getByTestId(`channel-${CHANNEL}`).click();
+    await expect(page.getByTestId("message-timeline")).toBeVisible();
+    await waitForMockLiveSubscription(page, CHANNEL);
+
+    let newestMessageId = "";
+    for (let i = 0; i < 20; i++) {
+      newestMessageId = (await emit(page, `Bottom-clearance message ${i}`)).id;
+    }
+    await page.waitForTimeout(300);
+    await page.evaluate(() => {
+      const scroller = document.querySelector<HTMLElement>(
+        '[data-buzz-conversation-scroll="true"]',
+      );
+      if (!scroller) throw new Error("Missing conversation scroll container");
+      scroller.scrollTop = scroller.scrollHeight;
+    });
+
+    await page
+      .getByTestId("message-input")
+      .fill(
+        "A long draft grows the composer and must keep the newest message above it.\nSecond line.\nThird line.",
+      );
+    await waitForAnimations(page);
+
+    const clearsComposer = await page.evaluate((messageId) => {
+      const composer = document.querySelector<HTMLElement>(
+        '[data-testid="channel-composer-overlay"] [data-testid="message-composer"]',
+      );
+      const newestRow = document.querySelector<HTMLElement>(
+        `[data-message-id="${CSS.escape(messageId)}"]`,
+      );
+      if (!composer || !newestRow) return false;
+      return (
+        newestRow.getBoundingClientRect().bottom <=
+        composer.getBoundingClientRect().top
+      );
+    }, newestMessageId);
+    expect(clearsComposer).toBe(true);
+
+    await page.setViewportSize({ width: 1280, height: 620 });
+    await expect
+      .poll(() =>
+        page.evaluate((messageId) => {
+          const composer = document.querySelector<HTMLElement>(
+            '[data-testid="channel-composer-overlay"] [data-testid="message-composer"]',
+          );
+          const newestRow = document.querySelector<HTMLElement>(
+            `[data-message-id="${CSS.escape(messageId)}"]`,
+          );
+          return Boolean(
+            composer &&
+              newestRow &&
+              newestRow.getBoundingClientRect().bottom <=
+                composer.getBoundingClientRect().top,
+          );
+        }, newestMessageId),
+      )
+      .toBe(true);
+  });
+
   test("thread panel replies fade out behind the reply composer", async ({
     page,
   }) => {
@@ -178,5 +325,41 @@ test.describe("composer overlays mask scrolled content", () => {
     });
 
     await expectOverlayBottomMask(page.getByTestId("thread-composer-overlay"));
+
+    await waitForMockLiveSubscription(page, CHANNEL, TYPING_KIND);
+    await page.evaluate(
+      ({ channelName, createdAt, pubkey, threadHeadId }) => {
+        window.__BUZZ_E2E_EMIT_MOCK_TYPING__?.({
+          channelName,
+          createdAt,
+          pubkey,
+          threadHeadId,
+        });
+      },
+      {
+        channelName: CHANNEL,
+        createdAt: root.created_at + 1,
+        pubkey: TEST_IDENTITIES.bob.pubkey,
+        threadHeadId: root.id,
+      },
+    );
+    const threadOverlay = page.getByTestId("thread-composer-overlay");
+    const activityRow = threadOverlay.getByTestId("message-typing-indicator");
+    await expect(activityRow).toBeVisible();
+    await waitForAnimations(page);
+    const [composerBounds, activityBounds] = await Promise.all([
+      threadOverlay.getByTestId("message-composer").boundingBox(),
+      activityRow.boundingBox(),
+    ]);
+    expect(composerBounds).not.toBeNull();
+    expect(activityBounds).not.toBeNull();
+    expect(activityBounds?.x ?? 0).toBeGreaterThanOrEqual(
+      (composerBounds?.x ?? 0) - 0.5,
+    );
+    expect(
+      (activityBounds?.x ?? 0) + (activityBounds?.width ?? 0),
+    ).toBeLessThanOrEqual(
+      (composerBounds?.x ?? 0) + (composerBounds?.width ?? 0) + 0.5,
+    );
   });
 });
diff --git a/desktop/tests/e2e/channels.spec.ts b/desktop/tests/e2e/channels.spec.ts
index d8e4d63080..07adada09f 100644
--- a/desktop/tests/e2e/channels.spec.ts
+++ b/desktop/tests/e2e/channels.spec.ts
@@ -1819,15 +1819,18 @@ test("channel date divider keeps the date sticky while the separator rule scroll
     "background-color",
     "rgba(0, 0, 0, 0)",
   );
-  await expect(composerOverlay.getByTestId("message-composer")).not.toHaveCSS(
+  await expect(composerOverlay.getByTestId("message-composer")).toHaveCSS(
     "backdrop-filter",
     "none",
   );
-  const composerActivityRow = composerOverlay.getByTestId(
-    "channel-composer-activity-row",
+  await expect(
+    composerOverlay.getByTestId("composer-dock-backdrop").locator("div"),
+  ).not.toHaveCSS("backdrop-filter", "none");
+  const composerRailMask = composerOverlay.getByTestId(
+    "composer-dock-rail-mask",
   );
-  await expect(composerActivityRow).toHaveCSS("backdrop-filter", "none");
-  await expect(composerActivityRow).not.toHaveCSS(
+  await expect(composerRailMask).toHaveCSS("backdrop-filter", "none");
+  await expect(composerRailMask).not.toHaveCSS(
     "background-color",
     "rgba(0, 0, 0, 0)",
   );