/* The chat and its case notes share a frame, but each has its own reading rhythm. */
.handover { scroll-margin-top: 6rem; }
.handover-card > .case-chat {
  display: grid;
  gap: 1rem;
  padding: clamp(1rem, 2vw, 1.5rem);
}
.relay .case-chat .utterance {
  margin: 0;
  max-width: min(86%, 38ch);
  justify-self: start;
}
.relay .case-chat :is(.team-reply, .human-reply) { justify-self: end; }
.relay .case-chat small { display: block; margin-bottom: .35rem; }
.relay .case-chat .utterance p { padding: .65rem .9rem; line-height: 1.45; }
.relay .case-chat .case-transfer {
  justify-self: center;
  max-width: 94%;
  margin: 0;
  padding: .35rem .8rem;
  border: 1px solid var(--edge);
  border-radius: 1rem;
  line-height: 1.4;
}
.case-transfer::before { content: "⇄" / ""; margin-inline-end: .45rem; }
.handover-card > .case-notes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .8rem;
  padding: 1rem;
  background: color-mix(in srgb, var(--mist) 85%, #dcc3a1);
}
.case-notes > .case-summary, .case-notes > .review-box {
  grid-area: auto;
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--edge);
  border-radius: 1rem;
  background: var(--paper);
}
.case-summary strong { display: block; color: var(--ink); }
.handover-card .case-summary ul {
  display: grid;
  gap: .55rem;
  margin: .75rem 0 0;
  padding-inline-start: 1.1rem;
  line-height: 1.45;
}
.case-summary li::marker { color: var(--sub); font-size: .8em; }
.case-notes .review-box p { margin: 0; line-height: 1.45; }
.handover-card .review-box .case-state {
  display: inline-block;
  border-radius: .8rem;
  padding: .28rem .65rem;
  background: color-mix(in srgb, var(--paper) 85%, #42a288);
  font-size: .78rem;
}
@media (min-width: 860px) {
  .handover-card > .case-notes { grid-template-columns: 1.1fr 1fr; }
}