/* The escalation queue. One card per conversation that has gone wrong. */

.esc-card { margin-bottom: 12px; border-left: 4px solid var(--border); }
.esc-card.esc-bad { border-left-color: #b91c1c; }
.esc-card.esc-warn { border-left-color: #d97706; }

.esc-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }

/* The seller's own words, given the weight they earn. A broker deciding
   whether to pick up the phone reads this line and nothing else, so it is set
   larger than the surrounding text rather than tucked under it. */
.esc-quote {
  margin: 0 0 10px;
  padding: 10px 14px;
  border-left: 3px solid var(--border);
  background: var(--bg);
  border-radius: 0 8px 8px 0;
  font-size: 15px;
  line-height: 1.45;
}

.esc-why { margin-bottom: 10px; }

.esc-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding-top: 8px; border-top: 1px solid var(--border); }

.esc-close { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.esc-close-row { display: flex; gap: 8px; align-items: center; margin-top: 5px; flex-wrap: wrap; }
.esc-close-row select { min-width: 220px; }

.esc-closed { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); }

@media (max-width: 620px) {
  .esc-close-row { flex-direction: column; align-items: stretch; }
  .esc-close-row select, .esc-close-row .btn { width: 100%; }
}