/* Answering a number that is not a lead yet, in the Inbox's pane for it:
   the conversation, ours and theirs, and the lead composer under it.
   public/js/page-inbox-numbers.js and the held mode in public/js/composer.js. */

.held-msg { margin-bottom: 6px; }
.held-msg .card-body { padding: 9px 14px; }
/* Theirs on the left and ours on the right, the way a thread reads, so the
   order of who said what is clear without reading the labels. */
.held-msg.theirs { margin-right: 36px; }
.held-msg.ours { margin-left: 36px; background: #eff6ff; border-color: #bfdbfe; }
.held-msg .bad-text { color: #b91c1c; font-weight: 600; }

/* Where the reply box sits under a lead's thread (.thread-compose), with the
   same rule above it. Capped, so on a short screen the composer cannot squeeze
   the conversation it is answering out of the pane; it scrolls instead. */
.held-compose {
  flex: none;
  border-top: 1px solid var(--border);
  padding: 12px 16px;
  max-height: 60%;
  overflow-y: auto;
}
.held-compose .composer { margin-bottom: 0; box-shadow: none; }
.held-compose .held-callnote { margin: 2px 0 4px; }

/* Below the app's phone breakpoint the pane grows with its content, so there
   is nothing to cap. 860px, the number public/css/phone.css turns over at. */
@media (max-width: 860px) {
  /* The composer is the last thing on the page here, so the floating My To Do
     dock (fixed, bottom right) sat over the bottom of Send at the end of the
     scroll, with nothing left to scroll it clear. Measured at 375px: the dock
     covered 14px of the button. The room below lets the page scroll past it. */
  .held-compose { max-height: none; overflow: visible; padding-bottom: 72px; }
  .held-msg.theirs { margin-right: 16px; }
  .held-msg.ours { margin-left: 16px; }
}