/* Keep message history readable without pushing the composer off-screen. */
.inbox-layout {
  height: auto;
  min-height: 0;
}

.inbox-layout .conversation {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: visible;
}

.inbox-layout .messages {
  flex: 0 0 auto;
  height: clamp(180px, 34vh, 410px);
  min-height: 180px;
  max-height: 410px;
}

.inbox-layout .composer-dock {
  max-height: none;
  overflow: visible;
}

@media (max-width: 720px) {
  .inbox-layout {
    height: auto;
    min-height: 0;
  }

  .inbox-layout .conversation {
    display: block;
    overflow: visible;
  }

  .inbox-layout .messages {
    height: auto;
    min-height: 96px;
    max-height: 34vh;
    margin-bottom: 8px;
  }

  .inbox-layout .composer-dock {
    max-height: none;
    overflow: visible;
  }
}