/* Mobile chat shell hotfix.
   This file intentionally loads last so older installed styles cannot restore
   the full-screen glass card or detach the composer from the viewport bottom. */
@media (max-width: 760px) {
  body.chat-list-active #chatView,
  body:has(#chatConversationList:not(.hidden)) #chatView {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  body.chat-list-active #chatView::before,
  body.chat-list-active #chatView::after,
  body:has(#chatConversationList:not(.hidden)) #chatView::before,
  body:has(#chatConversationList:not(.hidden)) #chatView::after {
    display: none !important;
  }

  body.chat-active #chatView,
  body:has(#chatConversationPane:not(.hidden)) #chatView {
    display: block !important;
    position: fixed !important;
    z-index: 60;
    top: var(--chat-viewport-top, 0px);
    bottom: auto;
    left: 50%;
    width: min(100%, 720px);
    height: var(--chat-viewport-height, 100dvh) !important;
    min-height: 0 !important;
    padding: calc(8px + var(--safe-top)) 10px calc(8px + var(--safe-bottom));
    overflow: hidden !important;
    transform: translateX(-50%);
  }

  body.chat-active #chatConversationPane,
  body:has(#chatConversationPane:not(.hidden)) #chatConversationPane {
    display: grid !important;
    grid-template-rows: auto auto auto auto minmax(0, 1fr) auto auto !important;
    width: 100%;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #chatConversationPane.hidden {
    display: none !important;
  }

  body.chat-active #chatMessages,
  body:has(#chatConversationPane:not(.hidden)) #chatMessages {
    height: auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
  }

  body.chat-active #chatForm,
  body:has(#chatConversationPane:not(.hidden)) #chatForm {
    position: relative !important;
    inset: auto !important;
    align-self: end !important;
    flex: none !important;
  }
}