/* Loaded after the PWA appearance layer: the visible frame owns the keyboard resize. */
#appShell {
  height: var(--chat-visible-height, var(--visible-height, 100dvh));
  min-height: 0;
}
#appShell > .chat-panel { min-height: 0; overflow: hidden; }
#chatPanel > .chat-header,
#chatPanel > .group-notice,
#chatPanel > .pinned-message-bar,
#chatPanel > .account-alert,
#chatPanel > .reply-bar,
#chatPanel > .emoji-tabs,
#chatPanel > .emoji-panel,
#chatPanel > .composer { flex: 0 0 auto; }
#messageList {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overflow-anchor: none;
  scroll-behavior: auto;
  padding-bottom: 10px;
}
/* A non-shrinking spacer also keeps a short conversation beside the composer. */
#messageList::before { content: ""; flex: 1 0 0; }
#messageList > * { flex-shrink: 0; }
/* Preserve the former block layout's collapsed spacing between adjacent rows. */
#messageList > .message-row { margin-top: 0; margin-bottom: 13px; }
#messageList > .system-message { margin-top: 0; margin-bottom: 14px; }
#messageList > .message-row:first-child { margin-top: 13px; }
#messageList > .system-message:first-child { margin-top: 14px; }
#messageList > .message-row:last-child { margin-bottom: 0; }

@media (max-width: 760px), (pointer: coarse) {
  html, body { height: 100% !important; overflow: hidden; }
  body { position: fixed; inset: 0; }
  body #appShell {
    position: absolute !important;
    top: var(--chat-viewport-top, 0px) !important;
    left: var(--chat-viewport-left, 0px) !important;
    right: auto !important;
    bottom: auto !important;
    width: var(--chat-visible-width, 100%) !important;
    height: var(--chat-visible-height, 100dvh) !important;
    max-height: none !important;
  }
  #messageInput { font-size: 16px; }
  html[data-chat-keyboard="open"] #messageForm { padding-bottom: 8px; }
  html[data-chat-keyboard="open"] #chatPanel > .group-notice { display: none; }
  html[data-chat-keyboard="open"] #messageList { padding-top: 8px; }
}