/* ── THE WhatsApp conversation thread. ONE FILE, for both consoles. ───────────────────────────────────────────
   Paired with shared/public/wa-thread.js: that file decides the markup, this one decides how it looks, and
   splitting them across two per-console stylesheets is how you get two consoles that agree on the HTML and still
   draw the same conversation differently. Loaded AFTER each console's styles.css — in the client dashboard the
   WhatsApp *preview* component also owns .wa-btn / .wa-body / .wa-meta, and the thread's rules have always won by
   coming later in source order.

   A conversation is read by SHAPE as much as by words: who spoke, in bubbles, with the buttons they were actually
   offered. The old row-per-message table lost that, and lost the thing you most want to check — whether the
   interactive message we sent looked the way we intended. Deliberately WhatsApp's own visual grammar (tails,
   ticks, day separators) rather than either dashboard's, because the question being answered is "what did the
   customer see".

   TOKENS ARE CHAINED, the same trick shared/public/logviewer.js documents: the two consoles spell the same tokens
   differently — admin has --fg-2 / --line-2 / --panel-2 / --panel-3, the client has --fg2 / --line2 / --panel2 /
   --panel3 — so every reference tries the admin name, then the client name, then a literal hex. Without the chain
   this file would silently resolve to nothing in one console (see __tests__/client/css-vars.test.js, which exists
   because that already happened once). The final hex is not decoration: it is what keeps the thread readable if
   this stylesheet is ever loaded without either console's theme. */
.wa-thread { display:flex; flex-direction:column; gap:2px; padding:14px 10px; border-radius:12px;
  background:var(--panel-2, var(--panel2, #0d0d10)); max-height:60vh; overflow-y:auto; }
.wa-empty { padding:36px; text-align:center; color:var(--mut, #74747e); }
.wa-day { text-align:center; margin:12px 0 8px; }
.wa-day span { font-size:11px; color:var(--mut, #74747e); background:var(--panel-3, var(--panel3, #22222b)); padding:3px 10px; border-radius:8px; }
.wa-row { display:flex; margin:1px 0; }
.wa-row.them { justify-content:flex-start; }
.wa-row.us { justify-content:flex-end; }
.wa-bub { max-width:min(78%, 520px); padding:7px 10px 5px; border-radius:10px; font-size:13.5px; line-height:1.45;
  box-shadow:0 1px 1px rgba(0,0,0,.18); word-break:break-word; }
/* Incoming left and neutral, outgoing right and tinted — the one convention every WhatsApp user already reads
   without being told. The outgoing green is a LITERAL, not a token: it is WhatsApp's colour, not this product's,
   and theming it to each console would defeat the point of showing the customer's view. */
.wa-row.them .wa-bub { background:var(--panel-3, var(--panel3, #22222b)); color:var(--fg, #f6f6f8); border-top-left-radius:3px; }
.wa-row.us .wa-bub { background:#075E54; color:#fff; border-top-right-radius:3px; }
.wa-body b { font-weight:600; }
.wa-tag { font-size:10px; text-transform:uppercase; letter-spacing:.4px; opacity:.75; margin-bottom:3px; }
.wa-meta { display:flex; gap:4px; justify-content:flex-end; align-items:center; font-size:10.5px; opacity:.65; margin-top:3px; }
.wa-tick.read { color:#53bdeb; opacity:1; }
/* Quick replies and list buttons sit UNDER the bubble as WhatsApp draws them, so a screenshot of this and a
   screenshot of the phone show the same thing. */
.wa-btn { margin-top:5px; padding:6px; text-align:center; font-size:12.5px; border-radius:7px;
  background:rgba(255,255,255,.08); border-top:1px solid rgba(255,255,255,.14); }
.wa-row.them .wa-btn { background:rgba(0,0,0,.16); }
.wa-list { margin-top:5px; padding:5px 7px; border-radius:7px; background:rgba(0,0,0,.14); }
.wa-list-t { font-size:10.5px; text-transform:uppercase; letter-spacing:.4px; opacity:.7; margin-bottom:2px; }
.wa-list-r { font-size:12.5px; padding:2px 0; border-bottom:1px solid rgba(255,255,255,.07); }
.wa-list-r:last-child { border-bottom:0; }
.wa-media { margin-top:5px; padding:14px; text-align:center; font-size:12px; border-radius:7px; background:rgba(0,0,0,.16); }

/* A carousel as a carousel: a sideways strip of real cards, because "6 cards" told the reader nothing about what
   the customer was actually shown. The strip scrolls INSIDE the bubble — a wide carousel must never make the page
   scroll sideways, which also depends on `.conv-split` using minmax(0,1fr) rather than a bare 1fr for the chat
   column (that lives in each console's styles.css, next to the rest of its layout).
   The photo is a placeholder tile: the send record keeps `image` as a boolean, not the signed URL. */
.wa-cards { display:flex; gap:6px; margin-top:6px; padding-bottom:4px; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; }
.wa-card { flex:0 0 150px; display:flex; flex-direction:column; scroll-snap-align:start;
  border-radius:8px; overflow:hidden; background:var(--panel, #131318); color:var(--fg, #f6f6f8); border:1px solid var(--line-2, var(--line2, #34343f)); }
/* The tile reads as a caption, not as content: the word "image" set small and uppercase says "a photo was here"
   without competing with the card's real title. */
.wa-card-img { height:78px; display:flex; align-items:center; justify-content:center;
  font-size:10.5px; text-transform:uppercase; letter-spacing:.4px;
  background:var(--panel-3, var(--panel3, #22222b)); color:var(--mut, #74747e); }
/* flex:1 so the text area soaks up the height the tallest card in the strip forces, and the button stays pinned to
   the card's bottom edge instead of floating with dead space under it. */
.wa-card-b { flex:1; padding:6px 8px; }
.wa-card-t { font-size:12px; font-weight:650; margin-bottom:2px; }
.wa-card-x { font-size:11.5px; line-height:1.35; color:var(--fg-2, var(--fg2, #b4b4c0)); }
/* The in-card button is a link-coloured footer row, as WhatsApp draws it — not the translucent overlay the
   bubble-level .wa-btn uses, which would vanish against the card's own surface. */
.wa-card .wa-btn { margin-top:0; padding:7px 6px; border-radius:0; font-size:12px; font-weight:500;
  color:var(--acc, #6a5bfd); background:transparent; border-top:1px solid var(--line-2, var(--line2, #34343f)); }
.wa-row.them .wa-card .wa-btn { background:transparent; }
.wa-cards-n { margin-top:3px; font-size:10.5px; opacity:.7; }