/* Message supplier v2 — the dialog (design canvas 0fab8203, operator grant 2026-09-08).
 * Loaded by _chrome.php only while WholesaleMessageV2::on(). Storefront vocabulary:
 * Inter, ink #1A202C, accent #452B90, soft #EDE8F8, muted #556070, line #E4E2EE,
 * 999px pills, 48px doors — the same tokens wholesale-market.css and the lot page use.
 * Desktop: a centred 520px dialog. Phone (≤640px): a bottom sheet with a grab handle. */
.wmsg-ov { position: fixed; inset: 0; z-index: 10010; /* above the phone menu sheet and the assistant dock/panel (9998–9999, measured 2026-09-05) */ background: rgba(26, 32, 44, .42); display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.wmsg-ov[hidden] { display: none !important; }
/* [hidden] must beat every display rule below (the sent panel and the lot card are flex containers),
 * and the storefront's global button/textarea styles must not bleed into the dialog (measured live 2026-09-08:
 * the «Sent» panel showed under the composer, chips stacked, the textarea drew a second border). */
.wmsg-sheet [hidden] { display: none !important; }
.wmsg-sheet button, .wmsg-sheet textarea { -webkit-appearance: none; appearance: none; box-shadow: none; margin: 0; }
.wmsg-sheet button { text-transform: none; letter-spacing: normal; }
.wmsg-sheet { width: 520px; max-width: 100%; max-height: calc(100vh - 48px); overflow: auto; background: #fff; border-radius: 22px; box-shadow: 0 24px 60px rgba(26, 32, 44, .18); padding: 26px 28px 24px; box-sizing: border-box; font-family: "Inter", Inter Fallback, system-ui, -apple-system, sans-serif; color: #1A202C; display: flex; flex-direction: column; gap: 16px; }
.wmsg-handle { display: none; }
/* The compose panel is a column with the SAME 16px rhythm as the sheet — header → lot card → questions → composer → send. */
.wmsg-sheet .wmsg-compose { display: flex; flex-direction: column; gap: 16px; }
.wmsg-sheet .wmsg-note:empty { display: none; }
.wmsg-hd { display: flex; align-items: center; gap: 12px; }
.wmsg-av { width: 44px; height: 44px; border-radius: 12px; background: #EDE8F8 center/cover no-repeat; color: #452B90; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 17px; flex: 0 0 44px; overflow: hidden; }
.wmsg-av.has-logo { background-color: #fff; border: 1px solid #E4E2EE; }
.wmsg-hdt { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.wmsg-ttl { font-family: "Poppins", Poppins Fallback, "Inter", Inter Fallback, system-ui, sans-serif; font-weight: 600; font-size: 17px; line-height: 1.25; letter-spacing: -.01em; }
.wmsg-sub { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: #0F766E; background: #E6F7F4; border-radius: 999px; padding: 3px 10px; }
.wmsg-sub:empty { display: none; }
.wmsg-sub::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: #0F766E; }
/* The close button sits in the sheet's TOP-RIGHT CORNER (operator 2026-09-23, Faire / iOS sheet
   benchmark). It used to be a flex item with margin-left:auto — and `.wmsg-sheet button { margin: 0 }`
   above outranks `.wmsg-x`, so on the phone it printed right after the «Replies within…» chip, mid-row.
   Absolute against the sheet: independent of the header's wrapping; the header keeps room for it. */
.wmsg-sheet { position: relative; }
.wmsg-hd { padding-right: 44px; }
.wmsg-sheet .wmsg-x { position: absolute; top: 20px; right: 20px; margin: 0; width: 36px; height: 36px; padding: 0; min-height: 0; border: 0; border-radius: 999px; background: transparent; color: #556070; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; z-index: 2; }
.wmsg-x:hover { background: #F4F2FA; color: #1A202C; }
.wmsg-lot { display: flex; gap: 12px; align-items: center; border: 1px solid #E4E2EE; border-radius: 14px; padding: 10px 12px; }
.wmsg-lot-ph { width: 56px; height: 56px; border-radius: 10px; background: #EDE8F8 center/cover no-repeat; flex: 0 0 56px; }
.wmsg-lot-t { font-weight: 600; font-size: 14px; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.wmsg-lot-m { font-size: 12.5px; color: #556070; margin-top: 2px; }
.wmsg-lot-m .mono { font-family: "JetBrains Mono", ui-monospace, monospace; }
.wmsg-lot-tag { margin-left: auto; font-size: 12.5px; color: #556070; white-space: nowrap; }
.wmsg-k { font-size: 12px; color: #556070; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.wmsg-sheet .wmsg-chips { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 8px; margin-top: 8px; }
.wmsg-sheet .wmsg-chip { display: inline-flex !important; align-items: center; flex: 0 0 auto !important; width: auto !important; max-width: 100%; min-height: 34px; border: 1px solid #E4E2EE; border-radius: 999px; padding: 0 14px; font-size: 13.5px; font-weight: 500; white-space: nowrap; background: #fff; color: #1A202C; cursor: pointer; font-family: inherit; line-height: 1.2; text-align: left; }
.wmsg-sheet .wmsg-chip:hover { background: #F4F2FA; }
.wmsg-sheet .wmsg-chip.on { background: #F1ECFA; border-color: #F1ECFA; color: #452B90; font-weight: 600; }
.wmsg-box { border: 1.5px solid #E4E2EE; border-radius: 14px; padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 10px; }
.wmsg-box:focus-within { border-color: #452B90; }
/* Photos (wave 3): a quiet «Add photos» in the meta line, previews above it. */
.wmsg-attach { color: #452B90; font-weight: 600; cursor: pointer; }
.wmsg-attach:hover { color: #321F69; }
.wmsg-file { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.wmsg-picks { display: flex; gap: 8px; flex-wrap: wrap; }
.wmsg-picks[hidden] { display: none !important; }
.wmsg-pick { position: relative; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; background: #EDE8F8; }
.wmsg-pick img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wmsg-sheet .wmsg-pick-x { position: absolute; top: 3px; right: 3px; width: 20px !important; height: 20px; min-height: 0; border: 0; border-radius: 999px; background: rgba(26, 32, 44, .72); color: #fff; font: 600 14px/20px "Inter", Inter Fallback, system-ui, sans-serif; cursor: pointer; padding: 0; }
.wmsg-sheet .wmsg-pick-x svg { display: block; margin: 0 auto; }
.wmsg-ta { width: 100%; min-height: 132px; border: 0 !important; outline: 0; box-shadow: none !important; border-radius: 0; resize: vertical; font: 15px/1.5 "Inter", Inter Fallback, system-ui, sans-serif !important; color: #1A202C; background: transparent; padding: 0; box-sizing: border-box; }
.wmsg-ta::placeholder { color: #8A93A3; }
.wmsg-meta { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: #556070; }
.wmsg-sheet .wmsg-send { display: block !important; width: 100% !important; box-sizing: border-box; min-height: 48px; border: 0; border-radius: 999px; background: #452B90; color: #fff; font: 600 15px/1 "Inter", Inter Fallback, system-ui, sans-serif; cursor: pointer; padding: 0 24px; }
.wmsg-sheet .wmsg-send:hover { background: #321F69; }
.wmsg-sheet .wmsg-send[disabled] { background: #C9C1E3; cursor: default; }
.wmsg-sheet .wmsg-send.busy { position: relative; color: rgba(255,255,255,.85); }
.wmsg-sheet .wmsg-send.busy::after { content: ""; position: absolute; right: 18px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 999px; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; animation: wmsg-spin .7s linear infinite; }
@keyframes wmsg-spin { to { transform: rotate(360deg); } }
.wmsg-sheet button:focus-visible, .wmsg-sheet a:focus-visible, .wmsg-sheet textarea:focus-visible { outline: 2px solid #452B90; outline-offset: 2px; }
.wmsg-note { font-size: 12.5px; color: #556070; text-align: center; line-height: 1.5; min-height: 18px; }
.wmsg-note.err { color: #B42318; }
.wmsg-sent { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.wmsg-ok { width: 52px; height: 52px; border-radius: 999px; background: #E6F7F4; color: #0F766E; display: inline-flex; align-items: center; justify-content: center; animation: wmsg-pop .28s ease-out; }
@keyframes wmsg-pop { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
.wmsg-sent h3 { margin: 0; font-family: "Poppins", Poppins Fallback, "Inter", Inter Fallback, system-ui, sans-serif; font-weight: 700; font-size: 21px; letter-spacing: -.01em; }
.wmsg-sent p { margin: 6px 0 0; font-size: 14.5px; color: #556070; line-height: 1.5; }
.wmsg-echo { width: 100%; box-sizing: border-box; border: 1px solid #E4E2EE; border-radius: 14px; padding: 12px 14px; font-size: 14px; line-height: 1.5; color: #1A202C; white-space: pre-wrap; max-height: 140px; overflow: auto; }
.wmsg-sheet .wmsg-row { display: flex; gap: 10px; width: 100%; }
.wmsg-sheet .wmsg-btn { flex: 1 1 0; width: auto; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font: 600 15px/1 "Inter", Inter Fallback, system-ui, sans-serif; text-decoration: none; cursor: pointer; border: 1.5px solid transparent; }
.wmsg-btn.solid { background: #452B90; color: #fff; }
.wmsg-btn.solid:hover { background: #321F69; color: #fff; }
.wmsg-btn.outline { background: #fff; color: #1A202C; border-color: #1A202C; }
.wmsg-btn.outline:hover { box-shadow: inset 0 0 0 1px #1A202C; color: #1A202C; }
html.wmsg-open, body.wmsg-lock { overflow: hidden; }
/* The assistant dock and the top bar would cover the sheet's foot on the phone (the sibling sheets hide them the same way). */
html.wmsg-open .ca-dock, html.wmsg-open .ccb { display: none; }
@media (max-width: 640px) { html.wmsg-open .wm-topbar { display: none; } } /* the promo bar is in normal flow — hiding it on desktop shifted the page under the scrim (fresh review P2-5) */ /* .ccb = the cookie banner, which drew over the phone sheet (measured 2026-09-08) */
@media (max-width: 640px) {
  .wmsg-ov { align-items: flex-end; padding: 0; }
  .wmsg-ov { height: var(--wmsg-vvh, 100%); top: var(--wmsg-vvtop, 0); bottom: auto; } /* follows the visual viewport while the keyboard is up (P2-6) */
  .wmsg-sheet { width: 100%; max-height: 92vh; max-height: 92dvh; max-height: calc(var(--wmsg-vvh, 100dvh) - 24px); border-radius: 22px 22px 0 0; padding: 10px 16px calc(20px + env(safe-area-inset-bottom)); gap: 12px; }
  .wmsg-sheet .wmsg-compose { gap: 12px; }
  .wmsg-handle { display: block; width: 40px; height: 4px; border-radius: 999px; background: #E4E2EE; margin: 0 auto 2px; }
  .wmsg-sheet .wmsg-x { top: 16px; right: 12px; }
  .wmsg-av { width: 40px; height: 40px; flex-basis: 40px; font-size: 15px; }
  .wmsg-ttl { font-size: 15px; }
  .wmsg-lot-ph { width: 44px; height: 44px; flex-basis: 44px; }
  .wmsg-chips { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; scrollbar-width: none; }
  .wmsg-chips::-webkit-scrollbar { display: none; }
  .wmsg-chip { white-space: nowrap; flex: 0 0 auto; }
  .wmsg-ta { min-height: 96px; font-size: 16px; }
  .wmsg-row { flex-direction: column; }
}
@media (prefers-reduced-motion: no-preference) {
  .wmsg-sheet { animation: wmsg-in .18s ease-out; }
  @keyframes wmsg-in { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
}