/* Concierge Desk — quotes panel + provider conversation (lane: offered /
   quoted / presented).

   The panel is NOT a card: a plain section header ("Offers out" + count) sits
   over a stacked list of per-provider CARDS (siblings, never nested). Each card
   reads the provider, the kind-aware price, bench/timing meta, the desk-only
   line-item disclosure, and the provider conversation. A provider who owes us a
   reply carries a quiet full-card tint + firmer border, ALWAYS alongside the
   labeled "Needs your reply" marker (color paired with a label, never hue alone).
   --ha-* tokens only. */

/* ---- section header (not a card wrapper — avoids nesting) ---- */
.quotes-panel { display: grid; gap: 12px; }
.panel-head {
  display: flex; align-items: baseline; justify-content: space-between; margin: 0;
}
.panel-head .t { font-size: 15px; font-weight: var(--ha-weight-bold); color: var(--ha-ink); }
.panel-head .r { font-size: 13px; color: var(--ha-ink-muted); }

/* ---- provider cards: each provider is its own resting surface ---- */
.qp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.qp-quote {
  background: var(--ha-surface); border: 1px solid var(--ha-border);
  border-radius: var(--ha-radius-md); box-shadow: var(--ha-shadow-card);
  padding: 16px 16px 14px;
}
/* the provider who owes us a reply: quiet full tint + firmer border (accent
   base at low alpha — see desk_tokens.css), never a side-stripe */
.qp-quote.is-attn { background: var(--ha-attn-bg); border-color: var(--ha-attn-edge); }

/* row 1: monogram + name own the row; the marker trails */
.qp-head { display: flex; align-items: center; gap: 12px; justify-content: space-between; }
.qp-id { display: flex; align-items: center; gap: 11px; min-width: 0; }
.qp-quote .mono {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--ha-row-hover); color: var(--ha-blue-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: var(--ha-weight-bold); letter-spacing: 0.01em;
}
.qp-name { font-size: 17px; font-weight: var(--ha-weight-bold); letter-spacing: -0.005em; color: var(--ha-ink); }

.needs-reply {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-size: 13px; font-weight: var(--ha-weight-medium); letter-spacing: 0.005em;
  color: var(--ha-blue-text); background: var(--ha-accent-tint);
  border-radius: var(--ha-radius-pill); padding: 3px 11px 3px 9px;
}
.needs-reply .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ha-blue-text); }

/* row 2: meta line */
.qp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 7px; }
.qp-price { font-size: 15px; font-weight: var(--ha-weight-bold); color: var(--ha-ink); white-space: nowrap; }
.qp-awaiting { font-size: 14px; color: var(--ha-ink-muted); }
.qp-badge { font-size: 13px; color: var(--ha-ink-muted); }
.qp-chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 13px;
  font-weight: var(--ha-weight-medium); padding: 2px 10px;
  border-radius: var(--ha-radius-pill); background: var(--ha-success-tint);
  color: var(--ha-success); border: 1px solid var(--ha-success-edge);
}
.qp-chip svg { width: 14px; height: 14px; }

/* row 3: desk-only line items */
.qp-breakdown { margin-top: 9px; font-size: 12px; color: var(--ha-ink-muted); }
.qp-breakdown summary {
  cursor: pointer; font-size: 13px; color: var(--ha-ink-muted); list-style: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.qp-breakdown summary::-webkit-details-marker { display: none; }
.qp-breakdown summary .chev { width: 13px; height: 13px; transition: transform 140ms ease; }
.qp-breakdown[open] summary .chev { transform: rotate(90deg); }
.qp-items { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.qp-items li { display: flex; justify-content: space-between; gap: 16px; color: var(--ha-ink); }
.qp-items-note { font-size: 11px; color: var(--ha-ink-muted); margin: 6px 0 0; }

/* ---- row 4: talk-to-them zone (the provider conversation) ---- */
.talk { margin-top: 12px; }

/* The conversation is a Stimulus-toggled zone (pconv controller flips `is-open`
   on the root). Collapsed: only the action bar shows -- the "Message {first}"
   toggle beside the View portal door. Open: the full-width thread + composer
   stack, then the action bar beneath with Send + "Hide Messages" + View portal.
   A native <summary> can't sit below the textarea, hence the class toggle. */
.pconv { display: flex; flex-direction: column; gap: 12px; }
.pconv-summary { cursor: pointer; }
.pconv-summary svg { width: 15px; height: 15px; flex: none; }
/* .pconv-summary-label is intentionally unstyled -- it inherits the .btn-secondary pill. */
.pconv-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pconv-bar form { margin: 0; }
.pconv-send { display: none; }
.pconv.is-open .pconv-send { display: inline-flex; }
/* label swap: closed shows "Message {first}", open shows "Hide Messages" */
.pconv-label-open { display: none; }
.pconv.is-open .pconv-label-closed { display: none; }
.pconv.is-open .pconv-label-open { display: inline; }

.btn-quiet {
  background: transparent; color: var(--ha-ink-muted); border: 1px solid var(--ha-border);
  height: 34px; padding: 0 14px; border-radius: var(--ha-radius-pill);
  font: inherit; font-size: 13px; font-weight: var(--ha-weight-medium);
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
}
.btn-quiet svg { width: 13px; height: 13px; }
.btn-quiet:hover { color: var(--ha-ink); }

/* The body (thread + composer) only shows when the conversation is open. */
.pconv-body { display: none; }
.pconv.is-open .pconv-body { display: grid; gap: 12px; }

/* ---- thread (open state) ---- */
/* Bounded, internally-scrolling thread so a long provider chat scrolls in place
   instead of stretching the brokering lane. */
.pconv-thread { display: flex; flex-direction: column; gap: 8px; max-height: 340px; overflow-y: auto; }
.pconv-empty { font-size: 13px; color: var(--ha-ink-muted); margin: 0; }
.pconv-msg { display: flex; flex-direction: column; gap: 3px; max-width: 82%; }
.pconv-msg.out { align-self: flex-end; align-items: flex-end; }
.pconv-msg.in { align-self: flex-start; align-items: flex-start; }
.pconv-bubble {
  font-size: 14px; line-height: 1.45; padding: 9px 13px;
  border-radius: 14px; color: var(--ha-ink);
}
.pconv-msg.out .pconv-bubble {
  background: var(--ha-blue-primary); color: var(--ha-surface);
  border-bottom-right-radius: 5px;
}
.pconv-msg.in .pconv-bubble {
  background: var(--ha-surface-subtle); border: 1px solid var(--ha-border-strong);
  border-bottom-left-radius: 5px;
}
.pconv-bubble p { margin: 0; }
.pconv-bubble p + p { margin-top: 4px; }
/* simple_format wraps the body in <p>; on the navy out-bubble it must carry the
   white text, not fall back to the base ink and read dark-on-navy. */
.pconv-msg.out .pconv-bubble p { color: var(--ha-surface); }
.pconv-foot { font-size: 12px; color: var(--ha-ink-muted); }
.pconv-sent-by { font-weight: var(--ha-weight-medium); }

/* ---- composer (open state) ---- */
.pconv-composer { display: grid; gap: 10px; }
.pconv-form textarea {
  width: 100%; min-height: 58px; resize: vertical; font: inherit; font-size: 14px;
  color: var(--ha-ink); padding: 10px 12px; border: 1px solid var(--ha-border);
  border-radius: var(--ha-radius-md); background: var(--ha-surface);
}
.pconv-form textarea:focus { outline: none; border-color: var(--ha-blue-accent); box-shadow: var(--ha-focus-ring); }
.pconv-confirm { font-size: 12px; color: var(--ha-success); }

@media (prefers-reduced-motion: reduce) {
  .qp-breakdown summary .chev { transition: none; }
}