/* Messages natural-height correction.
   Conversation cards should size from their real content. Only the message
   list becomes scrollable when it grows past a useful viewport limit. */

/* Keep the shared language workspace compact, but not vertically cramped. */
body:has(.admin-inbox-shell) .admin-workspace-bar {
  min-block-size: 48px;
  padding: 9px 12px;
}

body:has(.admin-inbox-shell) .admin-workspace-bar select {
  min-block-size: 34px;
}

/* Embedded composers should meet the message list directly. */
.admin-inbox-split-layout .direct-message-composer,
.messages-tab-panel .group-message-composer {
  margin-block-start: 0;
}

/* Empty status rows must not reserve a second footer. */
.admin-inbox-split-layout [data-inbox-thread-status]:empty,
.messages-tab-panel #groupMessageStatus:empty {
  display: none;
}

.admin-inbox-split-layout [data-inbox-thread-status]:not(:empty),
.messages-tab-panel #groupMessageStatus:not(:empty) {
  min-block-size: 0;
  margin: 0;
  padding: 4px 12px 8px;
  font-size: 0.78rem;
  line-height: 1.35;
}

/* The global desktop shell is rendered with html { zoom: .8 }. Keep the page
   background filled without using the conversation card as the spacer. */
@media (min-width: 1200px) {
  body:has(.messages-tab-panel) .app-shell,
  body:has(.admin-inbox-shell) .app-shell {
    min-block-size: calc(100vh / 0.8);
  }
}

@media (hover: hover) and (pointer: fine) {
  /* Direct / Support: neither column may stretch the conversation card. */
  body:has(.admin-inbox-shell) .admin-inbox-split-layout {
    align-items: start;
  }

  body:has(.admin-inbox-shell) .admin-inbox-split-layout > .admin-inbox-list,
  body:has(.admin-inbox-shell) .admin-inbox-split-layout > .admin-inbox-thread-panel {
    block-size: auto !important;
    min-block-size: 0 !important;
    max-block-size: none !important;
  }

  body:has(.admin-inbox-shell) .admin-inbox-split-layout > .admin-inbox-list {
    max-block-size: min(70dvh, 700px) !important;
    overflow-y: auto;
  }

  body:has(.admin-inbox-shell) .admin-inbox-split-layout > .admin-inbox-thread-panel {
    overflow: hidden;
  }

  /* Replace the legacy flexible 1fr message row. With an auto-sized panel the
     message track should use only its content until it reaches max-block-size. */
  body:has(.admin-inbox-shell) .admin-inbox-split-layout > .admin-inbox-thread-panel:has(.direct-message-thread) {
    grid-template-rows: auto auto auto auto !important;
  }

  body:has(.admin-inbox-shell) .admin-inbox-thread-messages.direct-message-thread {
    block-size: auto !important;
    min-block-size: 0 !important;
    max-block-size: min(56dvh, 520px) !important;
    overflow-x: hidden;
    overflow-y: auto;
  }

  /* Groups: header + actual messages + composer determine the full card height. */
  .messages-tab-panel .group-chat-layout {
    align-items: start;
    block-size: auto !important;
    max-block-size: none !important;
  }

  .messages-tab-panel .group-chat-panel {
    grid-template-rows: auto auto auto auto !important;
    block-size: auto !important;
    min-block-size: 0 !important;
    max-block-size: none !important;
    overflow: hidden;
  }

  .messages-tab-panel .group-message-list {
    block-size: auto !important;
    min-block-size: 0 !important;
    max-block-size: min(56dvh, 520px) !important;
    overflow-x: hidden;
    overflow-y: auto;
  }
}

/* Tablet/mobile uses the same content-height rule. The list receives the
   scroll, not the whole conversation card, so the composer stays attached to
   the bottom edge of the card. */
@media (max-width: 1180px) {
  .admin-inbox-split-layout > .admin-inbox-thread-panel:has(.direct-message-thread),
  .messages-tab-panel .group-chat-panel {
    grid-template-rows: auto auto auto auto !important;
    block-size: auto !important;
    min-block-size: 0 !important;
    max-block-size: none !important;
  }

  .admin-inbox-thread-messages.direct-message-thread,
  .messages-tab-panel .group-message-list {
    block-size: auto !important;
    min-block-size: 0 !important;
    max-block-size: min(58dvh, 520px) !important;
    overflow-x: hidden;
    overflow-y: auto;
  }
}