/* Concierge Desk — post-acceptance brokering pane (prompt 4).

   A full-width, vertically-stacked pane (no nested cards, no columns) rendered
   into the focused job's stage region: header, the propose -> agree -> lock date
   band (one control per state), the provider conversation, a customer-relay band,
   and a read-only reminders/day-of line with Mark fulfilled. Uses --ha-* tokens
   only; reuses existing brokering classes (.tpl, .broker-terminal, .pill). */

.bpane { display: flex; flex-direction: column; gap: 0; min-width: 0; }

/* ---- header ---- */
.bpane-head {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding-bottom: 14px; border-bottom: 1px solid var(--ha-border);
}
.bpane-desc {
  font-size: 15px; font-weight: var(--ha-weight-bold); letter-spacing: -0.01em;
  color: var(--ha-ink);
}
.bpane-won { margin-top: 4px; font-size: 13px; display: flex; gap: 10px; flex-wrap: wrap; }
.bpane-prov { color: var(--ha-ink); font-weight: var(--ha-weight-medium); }
.bpane-price { color: var(--ha-ink-muted); }

/* ---- stacked zones ---- */
.bpane-zone { padding: 16px 0; border-bottom: 1px solid var(--ha-border); min-width: 0; }
.bpane-zone:last-child { border-bottom: 0; }
.bpane-zone-h {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em;
  font-weight: var(--ha-weight-medium); color: var(--ha-ink-muted); margin-bottom: 10px;
}
.bpane-note { font-size: 12px; color: var(--ha-ink-muted); margin-top: 8px; }
.bpane-state {
  font-size: 14px; color: var(--ha-ink);
  display: flex; align-items: center; gap: 7px;
}
.bpane-state b { font-weight: var(--ha-weight-bold); }
.bpane-state .ok-ico { width: 15px; height: 15px; flex: none; color: var(--ha-success); }

/* ---- date band controls (single control per state) ---- */
.bpane-date-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bpane-date-form[hidden] { display: none; }
.bpane-date-form input[type="datetime-local"] {
  height: 34px; border: 1px solid var(--ha-border); border-radius: var(--ha-radius-md);
  padding: 0 10px; font: inherit; font-size: 13px; color: var(--ha-ink);
  background: var(--ha-surface);
}
.bpane-date-form input:focus {
  outline: none; border-color: var(--ha-blue-accent); box-shadow: var(--ha-focus-ring);
}
.bpane-actions {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px;
}
.bpane-date .bpane-actions { margin-top: 10px; }

.btn-ghost {
  background: none; border: 1px solid var(--ha-border); color: var(--ha-blue-text);
  border-radius: var(--ha-radius-md); padding: 7px 13px; font: inherit; font-size: 13px;
  cursor: pointer;
}
.btn-ghost:hover { background: var(--ha-row-hover); }
.btn-ghost:focus-visible { outline: none; box-shadow: var(--ha-focus-ring); }

/* ---- chips (reuse .tpl) ---- */
.bpane-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }

/* ---- read-only reminders line ---- */
.bpane-reminders {
  font-size: 13px; color: var(--ha-ink-muted); display: flex; gap: 8px; flex-wrap: wrap;
  align-items: center;
}
.bpane-reminders b { color: var(--ha-ink); font-weight: var(--ha-weight-medium); }

@media (prefers-reduced-motion: reduce) {
  .bpane-date-form, .bpane-actions { transition: none; }
}