/* Portal UI fixes — loaded by every /portal/ page */

/* Messages: long text ran off the side below 704px.
   1fr takes its minimum from the content, so the column
   could not shrink. minmax(0,1fr) lets it. */
.dm { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 44rem) {
  .dm { grid-template-columns: 15rem minmax(0, 1fr); }
}
.dm > * { min-width: 0; }
.dm-thread { min-width: 0; }

.chat { grid-template-columns: minmax(0, 1fr); }
.chat-msg { min-width: 0; }
.chat-msg > * { min-width: 0; }
.chat-msg .meta { min-width: 0; flex-wrap: wrap; }
.chat-msg .body {
  min-width: 0;
  max-width: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* The team list: the preview line under each name is not truncated,
   so the whole column scrolls sideways and the names disappear.
   Nothing in that list should ever be wider than the column. */
.dm-people { overflow-x: hidden; }
.dm-person { max-width: 100%; overflow: hidden; }
.dm-person > * { min-width: 0; max-width: 100%; }
.dm-person div,
.dm-person span:not(.dot) {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Scheduling planner: the right-hand block of each row is flex:none
   and the venue line is nowrap, so below ~570px they overlap instead
   of giving way. The row stacks instead. */
.sem .right { min-width: 0; }

@media (max-width: 38rem) {
  .sem { flex-wrap: wrap; }
  .sem .body { flex: 1 1 100%; min-width: 0; }
  .sem .right {
    flex: 1 1 100%;
    max-width: none;
    justify-content: flex-start;
    margin-top: 0.35rem;
    padding-left: 3.7rem;
  }
  .sem .where {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
  }
  .sem .coachsel { max-width: 100%; }
}

/* ---------- Messages, on a phone ---------- */

/* The list and the thread cannot share a narrow screen. Until a
   conversation is chosen you get the list; choosing one hands the
   screen over to it, with a link back. Above 44rem both show side by
   side as before and none of this applies. */
.dm-back { display: none; }

@media (max-width: 44rem) {
  .dm .dm-thread { display: none; }
  .dm.thread-open #dm-side { display: none; }
  .dm.thread-open .dm-thread { display: block; }
  .dm.thread-open .dm-back {
    display: inline-block;
    margin-bottom: 0.6rem;
    font-size: 0.9rem;
  }
  /* Sitting inside its own scrolling box on a phone means two
     scrollbars fighting. Let the page scroll instead. */
  .dm.thread-open .chat { max-height: none; overflow: visible; }
  .dm-people { max-height: none; }
}

/* Name, then a line of what was last said, then when. */
.dm-person { align-items: center; gap: 0.6rem; }
.dm-person .nm-wrap {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.3;
}
.dm-person .prev {
  font-size: 0.78rem;
  color: var(--muted);
  max-width: 100%;
}
.dm-person.on .prev { color: var(--ink); }
.dm-person .when {
  flex: none;
  font-size: 0.7rem;
  color: var(--muted);
  align-self: flex-start;
  padding-top: 0.15rem;
}

/* The compose box grows with the message rather than scrolling what
   was typed a moment ago out of sight. */
#dm-box { max-height: 180px; }