.message-dock__header {
  cursor: grab;
  user-select: none;
}

.message-dock__panel[data-dragging="true"] .message-dock__header {
  cursor: grabbing;
}

.message-dock__panel:not(.hidden)[data-positioned="true"],
.message-dock__panel:not(.hidden)[data-viewport-fitted="true"],
.message-dock__panel:not(.hidden)[data-expanded="true"] {
  display: flex;
  flex-direction: column;
  max-width: none;
}

.message-dock__panel[data-positioned="true"] #message_dock_body,
.message-dock__panel[data-viewport-fitted="true"] #message_dock_body,
.message-dock__panel[data-expanded="true"] #message_dock_body {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
}

.message-dock__panel[data-positioned="true"],
.message-dock__panel[data-viewport-fitted="true"],
.message-dock__panel[data-expanded="true"],
.message-dock__panel[data-dragging="true"] {
  animation: none;
}

@media (max-width: 639px) {
  .message-dock__panel:not(.hidden):not([data-positioned="true"]):not([data-viewport-fitted="true"]):not([data-expanded="true"]) {
    display: flex;
    flex-direction: column;
    left: 8px;
    right: 8px;
    top: 72px;
    bottom: auto;
    width: auto;
    height: calc(100dvh - 80px);
  }

  .message-dock__panel:not([data-positioned="true"]):not([data-viewport-fitted="true"]):not([data-expanded="true"]) #message_dock_body {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
  }
}

/* The room's reaction picker is screen-fixed on /messages. The panel may or
   may not be a transformed box at any moment, so here it is pinned to the
   panel itself, between the header and the composer, and shrinks to fit a
   panel resized small rather than being cut by the panel's clip. */
.message-dock [data-role="reaction-picker"] {
  position: absolute;
  top: 3.5rem;
  bottom: 6rem;
  align-items: flex-end;
}

.message-dock [data-role="reaction-picker"] emoji-picker {
  height: min(20rem, 100%);
}

/* Minimised: the header bar alone. Inline sizes from a drag or resize are kept
   for when it opens back up, so the collapse has to outrank them. */
.message-dock__panel[data-minimized="true"] {
  height: auto !important;
}

.message-dock__panel[data-minimized="true"] #message_dock_body,
.message-dock__panel[data-minimized="true"] .message-dock__resize {
  display: none;
}

.message-dock__panel[data-minimized="true"] .message-dock__header {
  border-bottom-width: 0;
}

.message-dock__panel[data-expanded="true"] .message-dock__resize {
  display: none;
}

.message-dock__resize {
  cursor: nesw-resize;
  touch-action: none;
}