/* Public document Q&A (documents transplant G2) — the customer "Ask a question" card on the
   public /d/<token> page (src/tenant/public_doc.js, .pd-qna). Kept out of aboo.css per the wave's
   file-ownership split; wire it in with `@import 'qna.css';` at the TOP of aboo.css (an @import
   must precede every rule). Reuses the same design tokens the .pd-* public-page styles use
   (--surface / --line / --ink / --muted / --accent / --ok / --radius), so it inherits light/dark
   automatically. No inline styles anywhere in the screen — every hook lives here. */

.pd-qna-title{font-weight:700;font-size:15px;color:var(--ink,#0E2E33);margin-bottom:2px}
.pd-qna-sub{font-size:13px;color:var(--muted,#2E575E);margin-bottom:12px}

/* the thread */
.pd-qna-list{display:flex;flex-direction:column;gap:14px;margin-bottom:14px}
.pd-qna-item{display:flex;flex-direction:column;gap:6px}
.pd-qna-msg{border-radius:var(--radius,8px);padding:10px 12px;border:1px solid var(--line,#d3e6e4)}
/* the customer's own question — plain surface, aligned to the start */
.pd-qna-ask-msg{background:var(--surface,#fff);align-self:stretch}
/* the supplier's reply — tinted + indented so a thread reads as a conversation */
.pd-qna-reply-msg{background:rgba(25,196,196,.08);border-color:rgba(25,196,196,.35);margin-left:18px}
.pd-qna-meta{display:flex;align-items:baseline;gap:8px;margin-bottom:3px;flex-wrap:wrap}
.pd-qna-who{font-weight:600;font-size:13px;color:var(--ink,#0E2E33)}
.pd-qna-when{font-size:12px;color:var(--muted,#2E575E)}
/* customer text is untrusted: rendered as a text node by tina4's ${} interpolation (never
   innerHTML). white-space:pre-wrap keeps their line breaks without letting markup through. */
.pd-qna-body{font-size:14px;color:var(--ink,#0E2E33);line-height:1.5;white-space:pre-wrap;word-break:break-word}
.pd-qna-pending{font-size:12px;color:var(--muted,#2E575E);font-style:italic;margin-left:18px}

/* confirmation after a successful send */
.pd-qna-sent{background:rgba(21,128,61,.12);color:var(--ok,#15803d);border-radius:var(--radius,8px);
  padding:9px 12px;font-size:13px;margin-bottom:12px}

/* the ask form */
.pd-qna-ask{border-top:1px solid var(--line,#d3e6e4);padding-top:14px}
.pd-qna-ask-title{font-weight:600;font-size:14px;color:var(--ink,#0E2E33);margin-bottom:10px}
.pd-qna-text{resize:vertical;min-height:72px}
.pd-qna-actions{display:flex;justify-content:flex-end;margin-top:2px}

/* phones: the supplier reply sits flush so the narrow column keeps its width */
@media (max-width:560px){
  .pd-qna-reply-msg,.pd-qna-pending{margin-left:0}
  .pd-qna-actions .pd-qna-send{width:100%}
}