/* reply-time.css — the Reply time tab of AI Opportunities (reply-time.js).
 * Built from opportunities.css's pieces and tokens (--op-*), and the bars of
 * leads-engine.css; no coloured edges on any box (owner, 28 Sep 2026). */

.crm-rt__status { flex-wrap: wrap; }
.crm-rt__status.is-on { background: var(--op-green-soft); }
.crm-rt__status .crm-opp__btn { margin-inline-start: auto; }
.crm-rt__hours { flex-basis: 100%; }
.crm-rt__suggest { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.6; color: var(--op-ink); }
.crm-rt__suggest .fi { color: var(--op-yellow); font-size: 16px; margin-top: 3px; }
.crm-rt__tile { cursor: default; }

.crm-rt__layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; align-items: start; }

.crm-rt__row { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-top: 1px solid var(--op-line); }
.crm-rt__row:first-of-type { border-top: 0; }
.crm-rt__rowtop { display: flex; align-items: center; gap: 10px; }
.crm-rt__name { font-weight: 700; font-size: 14px; color: var(--op-ink); text-decoration: none; unicode-bidi: plaintext; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-rt__name:hover { text-decoration: underline; }
.crm-rt__clock { margin-inline-start: auto; flex: none; font-size: 12.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--op-green-soft); color: var(--op-ok); }
.crm-rt__clock.is-late { background: var(--op-crit-soft); color: var(--op-crit); }
.crm-rt__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: var(--op-muted); }
.crm-rt__told { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--op-violet); }

.crm-rt__sub { font-size: 12.5px; font-weight: 700; color: var(--op-muted); margin-top: 6px; }
.crm-rt__fill { background: var(--op-green); }

/* ---- the settings window ---- */
.crm-rt__switch { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--op-ink); cursor: pointer; }
.crm-rt__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.crm-rt__minutes { max-width: 160px; }

@media (max-width: 1100px) {
  .crm-rt__layout { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .crm-rt__grid { grid-template-columns: 1fr; }
  .crm-rt__status .crm-opp__btn { margin-inline-start: 0; }
}