fix(mobile): preserve touch attachment and reduced-motion behavior

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/mothership-chat.tsx

@@ -935,10 +935,7 @@ export function MothershipChat({
         </div>
 
         <div
-          className={cn(
-            styles.footer,
-            animateInput && 'animate-slide-in-bottom motion-reduce:animate-none'
-          )}
+          className={cn(styles.footer, animateInput && 'animate-slide-in-bottom')}
           onAnimationEnd={animateInput ? onInputAnimationEnd : undefined}
         >
           <div className={styles.footerInner}>

apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/constants.ts

@@ -56,14 +56,14 @@ export interface PlusMenuHandle {
 }
 
 /** Shared draft typography for Build and Search composers. */
-export const PROMPT_TEXT_CLASSES = 'font-body text-md leading-[24px] tracking-[-0.015em] md:text-sm'
+export const PROMPT_TEXT_CLASSES =
+  'font-body text-md leading-[24px] tracking-[-0.015em] md:pointer-fine:text-sm'
 
 /**
  * Box and typography shared by the textarea and its mirror overlay — both must
  * produce identical line wrapping so the overlay text sits exactly over the
- * (transparent) textarea text. The scale is the chat input's native prompt
- * scale (`text-[14px]`, `-0.015em` tracking); the task modal's body inherits it
- * so the editor reads the same whether it's the chat input or inside the modal.
+ * (transparent) textarea text. The task modal inherits the same responsive
+ * prompt scale so its editor and the chat input wrap identically.
  */
 export const PROMPT_FIELD_CLASSES = cn(
   'm-0 box-border min-h-[24px] w-full [overflow-wrap:anywhere] border-0 bg-transparent',

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx

@@ -119,14 +119,18 @@ function ChatFilePreview({ file, onRemove }: ChatFilePreviewProps) {
   return (
     <div
       className={cn(
-        'group relative shrink-0 overflow-hidden rounded-md bg-[var(--surface-2)]',
+        'group relative pointer-coarse:flex shrink-0 pointer-coarse:items-center overflow-hidden rounded-md bg-[var(--surface-2)]',
         previewUrl
-          ? '@max-[960px]/workflow:pointer-coarse:size-12 size-[40px]'
-          : 'flex @max-[960px]/workflow:pointer-coarse:min-h-12 min-w-[80px] max-w-[120px] items-center justify-center px-2 py-0.5 @max-[960px]/workflow:pointer-coarse:pr-12'
+          ? 'size-[40px] pointer-coarse:h-12 pointer-coarse:w-auto'
+          : 'flex pointer-coarse:min-h-12 min-w-[80px] max-w-[120px] items-center justify-center px-2 py-0.5'
       )}
     >
       {previewUrl ? (
-        <img src={previewUrl} alt={file.name} className='size-full object-cover' />
+        <img
+          src={previewUrl}
+          alt={file.name}
+          className='pointer-coarse:size-12 size-full pointer-coarse:shrink-0 object-cover'
+        />
       ) : (
         <div className='min-w-0 flex-1'>
           <div className='truncate font-medium text-[var(--text-body)] text-micro'>{file.name}</div>
@@ -142,7 +146,7 @@ function ChatFilePreview({ file, onRemove }: ChatFilePreviewProps) {
           event.stopPropagation()
           onRemove(file.id)
         }}
-        className='absolute top-0.5 right-0.5 @max-[960px]/workflow:pointer-coarse:size-11 @min-[960px]/workflow:opacity-0 transition-opacity focus-visible:opacity-100 group-hover:opacity-100'
+        className='pointer-coarse:static absolute top-0.5 right-0.5 pointer-coarse:size-11 pointer-coarse:shrink-0 @min-[960px]/workflow:pointer-fine:opacity-0 transition-opacity focus-visible:opacity-100 group-hover:opacity-100'
       >
         <span
           className={cn(