/* Order details: a scoped view over existing private conversations. */
.order-conversation-panel {
  padding: 22px;
  border: 1px solid rgba(215, 154, 59, .24);
  border-radius: 16px;
  background: rgba(215, 154, 59, .035);
}
.order-conversation-heading,
.order-conversation-thread-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.order-conversation-heading h3 { margin: 5px 0 0; font-size: 1.18rem; }
.order-conversation-body { margin-top: 18px; }
.order-conversation-body[hidden] { display: none; }
.order-conversation-body > [data-order-conversation-list] { display: grid; gap: 16px; }
.order-conversation-thread {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(215, 154, 59, .24);
  border-radius: 12px;
  background: rgba(10, 8, 9, .12);
}
.order-conversation-thread-heading strong { overflow-wrap: anywhere; }
.order-conversation-thread-heading a { color: #9d6322; text-underline-offset: 3px; }
.order-conversation-event {
  padding: 12px 14px;
  border-left: 2px solid rgba(161, 116, 58, .46);
  background: rgba(255, 255, 255, .07);
  border-radius: 0 10px 10px 0;
}
.order-conversation-event.is-owner { border-left-color: #a57bba; }
.order-conversation-event-meta {
  display: block;
  margin-bottom: 5px;
  font: 700 .75rem/1.4 ui-sans-serif, system-ui, sans-serif;
}
.order-conversation-event p { margin: 0; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.order-conversation-reply { display: grid; gap: 10px; }
.order-conversation-reply label { display: grid; gap: 7px; font-weight: 700; }
.order-conversation-reply textarea {
  width: 100%;
  min-height: 92px;
  padding: 12px;
  border-radius: 9px;
  border: 1px solid rgba(161, 116, 58, .4);
  font: inherit;
  resize: vertical;
}
.order-conversation-reply button { justify-self: start; }
.order-conversation-empty { color: #62514b; line-height: 1.6; }
@media (max-width: 620px) {
  .order-conversation-panel { padding: 16px; }
  .order-conversation-heading .button { width: 100%; }
  .order-conversation-reply button { width: 100%; }
}