feat(web-shell): add mobile welcome composer slots

packages/web-shell/client/App.module.css

@@ -701,6 +701,14 @@
   padding: 0;
 }
 
+.composerHeader {
+  margin-bottom: 8px;
+}
+
+.customFooter {
+  flex-shrink: 0;
+}
+
 /* Esc-clear hint, shown in the composer's top status slot (where the streaming
    loader sits) — the two never coexist, so it stays clear of the queue. */
 .escClearStatus {
@@ -714,6 +722,76 @@
   padding: 12px 0 0;
 }
 
+.mobileWelcomeFooterMiddle {
+  display: none;
+}
+
+.mobileWelcomeGroup {
+  display: contents;
+}
+
+@media (max-width: 760px) {
+  .appChatEmpty .chatPaneWithMobileComposerBottom {
+    position: relative;
+    overflow: hidden;
+  }
+
+  .appChatEmpty .chatViewWithMobileComposerBottom .footer {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    margin-top: 0;
+  }
+
+  .appChatEmpty .mobileWelcomeGroup {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .appChatEmpty .chatViewWithWelcomeMiddle .footerWithCustomFooter {
+    display: contents;
+  }
+
+  .appChatEmpty .chatViewWithWelcomeMiddle .footerWithCustomFooter .composer {
+    order: 2;
+    width: min(100%, var(--chat-shell-width));
+    margin: 0 auto;
+    padding-right: 20px;
+    padding-left: 20px;
+  }
+
+  .appChatEmpty .chatViewWithWelcomeMiddle .mobileWelcomeFooterMiddle {
+    display: flex;
+    flex: 0 0 auto;
+    align-items: flex-start;
+    justify-content: center;
+    width: min(100%, var(--chat-shell-width));
+    margin: 0 auto;
+    padding-right: 20px;
+    padding-left: 20px;
+  }
+
+  .appChatEmpty .chatViewWithWelcomeMiddle .customFooter {
+    order: 1;
+    display: flex;
+    flex: 0 0 auto;
+    align-items: flex-start;
+    justify-content: center;
+    width: min(100%, var(--chat-shell-width));
+    margin: 0 auto;
+    padding-right: 20px;
+    padding-left: 20px;
+  }
+  .desktopWelcomeFooter {
+    display: none;
+  }
+
+  .emptyWelcomeFooter {
+    text-align: center;
+  }
+}
+
 .queuedPrompts {
   display: flex;
   flex-direction: column;