/* Project and task use the original task discussion on phones. Keep the
   scroll behavior here so short threads sit above the composer while long
   threads can still be scrolled all the way to the first message. */
.modal .messages,
.task-modal .messages {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  gap: 8px;
  justify-content: flex-start;
}
.modal .messages::before,
.task-modal .messages::before {
  content: '';
  margin-top: auto;
}
.modal .messages > .message,
.task-modal .messages > .message {
  flex: 0 0 auto;
  margin-bottom: 0;
}

/* Member chips stay inside their header sheet at tablet widths. */
.task-modal .modal-members .m-section-body,
.task-modal #taskMembersList {
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
}
.task-modal #taskMembersList { width: 100%; }

/* Task breadcrumbs are navigation. */
.task-modal .modal-breadcrumb button {
  border: 0;
  background: none;
  padding: 2px 0;
  color: var(--ink-label);
  font: inherit;
  cursor: pointer;
}
.task-modal .modal-breadcrumb button:hover { color: var(--ink); text-decoration: underline; }
.task-modal .modal-breadcrumb .breadcrumb-sep {
  color: var(--ink-label);
  font-size: 17px;
  line-height: 1;
}