/* Composer placement must not depend on the chat grid or Android's cached
   viewport units. It is attached directly to the visible viewport edge. */
@media (max-width: 760px) {
  html body.chat-active #chatForm,
  html body:has(#chatConversationPane:not(.hidden)) #chatForm {
    position: fixed !important;
    inset: auto 10px calc(8px + var(--safe-bottom)) 10px !important;
    z-index: 90 !important;
    width: auto !important;
    max-width: 700px !important;
    margin: 0 auto !important;
    transform: none !important;
  }

  html body.chat-active #chatMessages,
  html body:has(#chatConversationPane:not(.hidden)) #chatMessages {
    padding-bottom: calc(86px + var(--safe-bottom)) !important;
  }

  /* The picker is a sibling of the form after startup. Keep it above the
     fixed composer instead of allowing an implicit grid row to hide it. */
  html body.chat-active #chatEmojiPicker:not(.hidden),
  html body:has(#chatConversationPane:not(.hidden)) #chatEmojiPicker:not(.hidden) {
    position: fixed !important;
    inset: auto 10px calc(70px + var(--safe-bottom)) 10px !important;
    z-index: 95 !important;
    width: auto !important;
    max-width: 700px !important;
    height: min(300px, 40dvh) !important;
    margin: 0 auto !important;
  }

  html body.chat-active #chatEmojiPicker.expanded:not(.hidden),
  html body:has(#chatConversationPane:not(.hidden)) #chatEmojiPicker.expanded:not(.hidden) {
    inset: 0 !important;
    width: min(100%, 720px) !important;
    max-width: 720px !important;
    height: 100dvh !important;
  }

  .chat-conversation-pane[data-conversation="saved"] .chat-emoji-btn {
    display: grid !important;
  }

  .chat-conversation-pane[data-conversation="saved"] .chat-media-btn,
  .chat-conversation-pane[data-conversation="saved"] .chat-mic-btn {
    display: none !important;
  }

  .chat-conversation-pane[data-conversation="saved"] .chat-compose-row {
    grid-template-columns: 36px minmax(70px, 1fr) 42px !important;
  }
}