/* The inbox. Every value comes from tokens.css.
   Same two-column shape as the orders screen on purpose — the same job done
   the same way, so nothing has to be learned twice. */

.inbox {
  display: grid;
  grid-template-columns: var(--inb-list-w) 1fr;
  min-height: 100vh;
}
.inbox__list { border-right: var(--hair); overflow-y: auto; }
.inbox__detail { padding: var(--s-6) var(--s-6) var(--s-8); max-width: 620px; }

.inbox__listhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4);
  border-bottom: var(--hair);
}
.inbox__count {
  font-size: var(--fs-sub);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--track-tight);
  margin: 0;
}
.inbox__new {
  font: inherit;
  font-size: var(--fs-footnote);
  padding: var(--s-1) var(--s-3);
  border: var(--hair);
  border-radius: var(--radius-pill);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}
.inbox__new:hover { background: var(--fill); }

.inbox__threads { list-style: none; margin: 0; padding: 0; }

.thr {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  background: none;
  border: 0;
  border-bottom: var(--hair);
  padding: var(--s-4);
  cursor: pointer;
}
.thr:hover { background: var(--fill); }
.thr--on   { background: var(--fill); }
/* The one thing the list is for: they are waiting. */
.thr--waiting { box-shadow: inset 2px 0 0 var(--inb-waiting); }

.thr__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
}
.thr__who  { font-weight: var(--fw-medium); }
.thr__when { font-size: var(--fs-caption); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.thr__last {
  margin: var(--s-1) 0 0;
  font-size: var(--fs-footnote);
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.thr__tags { display: flex; gap: var(--s-2); margin-top: var(--s-2); }
.thr__tag {
  font-size: var(--fs-caption);
  color: var(--ink-3);
  border: var(--hair);
  border-radius: var(--radius-pill);
  padding: 0 var(--s-2);
}
.thr__tag--new { color: var(--wait); }

.inbox__head { margin-bottom: var(--s-5); }
.inbox__who {
  font-size: var(--fs-title-2);
  letter-spacing: var(--track-tight);
  font-weight: var(--fw-semibold);
  margin: 0;
}
.inbox__meta {
  display: flex;
  gap: var(--s-2);
  align-items: baseline;
  font-size: var(--fs-footnote);
  color: var(--ink-2);
  margin: var(--s-1) 0 var(--s-3);
}
.inbox__link {
  font: inherit;
  background: none;
  border: 0;
  padding: 0;
  color: var(--action);
  cursor: pointer;
  text-decoration: underline;
}

.composer--inbox { margin-top: var(--s-4); flex-wrap: wrap; }
.composer__note {
  flex-basis: 100%;
  font-size: var(--fs-caption);
  color: var(--wait);
}

/* The two sheets: start an order, and text somebody new. */
.sheet {
  border: 0;
  border-radius: var(--radius-lg);
  padding: var(--s-6);
  width: min(26rem, 90vw);
  box-shadow: var(--lift);
  color: var(--ink);
  background: var(--paper);
}
.sheet::backdrop { background: rgb(0 0 0 / 0.28); }
.sheet__title {
  font-size: var(--fs-title-3);
  letter-spacing: var(--track-tight);
  font-weight: var(--fw-semibold);
  margin: 0 0 var(--s-2);
}
.sheet__sub { font-size: var(--fs-footnote); color: var(--ink-2); margin: 0 0 var(--s-4); }
.sheet .composer__input { width: 100%; margin-bottom: var(--s-3); }
.composer__input--tall { resize: vertical; font: inherit; }
.sheet__note { font-size: var(--fs-footnote); color: var(--wait); margin: 0 0 var(--s-3); min-height: 1em; }
.sheet__row { display: flex; gap: var(--s-3); justify-content: flex-end; }

/* Their own notification system is behind ours. When it stops answering, this
   screen is the only place anyone would find out. */
.inbox__broken {
  border: var(--hair);
  border-left: 3px solid var(--late);
  border-radius: var(--radius-sm);
  padding: var(--s-3) var(--s-4);
  margin: 0 0 var(--s-5);
  font-size: var(--fs-footnote);
  color: var(--ink-2);
}

/* Twilio accepting a text is not the carrier delivering it. */
.msg__sent {
  display: block;
  font-size: var(--fs-caption);
  opacity: 0.65;
  margin-top: var(--s-1);
}
.msg__sent--bad { color: var(--late); opacity: 1; font-weight: var(--fw-medium); }

/* Someone who asked us to stop. Not a to-do — a line we do not cross. */
.thr--out { opacity: 0.6; }
.thr--out.thr--waiting { box-shadow: none; }
.thr__tag--out { color: var(--ink-3); }
.inbox__stopped {
  margin-top: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border: var(--hair);
  border-radius: var(--radius-sm);
  font-size: var(--fs-footnote);
  color: var(--ink-2);
  max-width: 46ch;
}