/* seller-contact.css — shared chat pill + panel component.
 *
 * Extracted verbatim from styles/components/listing-page.css (was lines
 * 3000-4678) so BOTH the listing page and the shop storefront can reuse the
 * one visual component (single source of truth). Listing-page context
 * overrides (partner-mode hide, mbuy-open hide, official-shop tints) stay in
 * listing-page.css because they depend on that page's body classes.
 *
 * Loaded on: listing-page-phase1.html, shop.html
 */

/* === Seller contact widget (Fiverr-style floating pill) === */
.seller-contact {
  position: fixed;
  left: 16px;
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-modal-front, 13000);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  pointer-events: none;
}
.seller-contact > * { pointer-events: auto; }

@media (min-width: 760px) {
  .seller-contact {
    left: 24px;
    bottom: 24px;
  }
}

/* While the cookie-consent banner is on screen (bottom-left, same corner) the
   pill lands on top of its buttons — yield until the visitor answers it. */
body:has(.jp-cookie-banner) .seller-contact {
  opacity: 0;
  pointer-events: none;
}
body:has(.jp-cookie-banner) .seller-contact > * { pointer-events: none; }

.seller-contact__pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 8px;
  background: var(--color-ink);
  color: var(--color-page-bg);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(35, 32, 48, 0.22), 0 2px 6px rgba(35, 32, 48, 0.16);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
  max-width: calc(100vw - 32px);
}
body.is-jedipic-official-shop .seller-contact__pill {
  background: var(--color-page-bg);
  color: var(--color-ink);
  border: 1px solid var(--color-line);
}
.seller-contact__pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 36px rgba(35, 32, 48, 0.28), 0 3px 8px rgba(35, 32, 48, 0.20);
  background: var(--intent-cta-ink-hover);
}
body.is-jedipic-official-shop .seller-contact__pill:hover {
  background: var(--color-mint);
}

.seller-contact__avatar-wrap {
  position: relative;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: inline-block;
}
.seller-contact__avatar-wrap--lg {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
}
.seller-contact__avatar {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  object-fit: cover;
  display: block;
}
.seller-contact__status-dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--color-ink-muted);
  border: 2px solid var(--color-ink);
}
/* Fiverr convention: a CALM static dot — green online, grey otherwise.
   No pulsing (owner removed the animation 2026-07-23). */
.seller-contact[data-status="online"] .seller-contact__status-dot {
  background: var(--color-forest);
}
.seller-contact[data-status="recent"] .seller-contact__status-dot {
  background: var(--color-warn);
}
.seller-contact[data-status="offline"] .seller-contact__status-dot {
  background: var(--color-line-dark);
}

@keyframes sellerContactPulse {
  0% { box-shadow: 0 0 0 0 rgba(63, 106, 96, 0.55); }
  70% { box-shadow: 0 0 0 8px rgba(63, 106, 96, 0); }
  100% { box-shadow: 0 0 0 0 rgba(47, 190, 109, 0); }
}

@keyframes sellerContactCloseBounce {
  0% { transform: scale(1); }
  50% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

.seller-contact__panel .seller-contact__status-dot {
  border-color: var(--color-page-bg);
  width: 14px;
  height: 14px;
}

.seller-contact__info {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
  min-width: 0;
}
.seller-contact__name {
  font-weight: 700;
  font-size: 13px;
}
.seller-contact__meta {
  font-size: 12px;
  font-weight: 500;
  opacity: 0.85;
}
.seller-contact__cta {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: var(--color-page-bg);
  color: var(--color-ink);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  flex: 0 0 auto;
}

/* Open state hides pill text, panel takes over */
.seller-contact[data-open] .seller-contact__pill {
  display: none;
}

.seller-contact__backdrop,
.seller-contact__sheet-grip {
  display: none;
}

/* === Panel (expanded composer) === */
.seller-contact__panel {
  position: relative;
  width: min(460px, calc(100vw - 32px));
  height: min(680px, calc(100vh - 48px));
  background: var(--color-cream);
  border: 1px solid var(--color-line);
  border-radius: 28px;
  padding: 0;
  box-shadow:
    0 28px 56px rgba(35, 32, 48, 0.18),
    0 8px 18px rgba(35, 32, 48, 0.08);
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
}
.seller-contact__panel[hidden] { display: none; }

.seller-contact__panel-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 76px 15px 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-line) 72%, transparent);
  flex: 0 0 auto;
}
.seller-contact__panel-meta {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.seller-contact__panel-name {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-ink);
  line-height: 1.2;
}
/* Store capsule in the chat header — same look as the product-card pill
   (sand for our own shops; partner colour arrives via inline style ONLY for
   partner shops — the store-pill colour rule). */
.seller-contact__store-pill {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  padding: 3px 13px 3px 3px;
  border-radius: 999px;
  background: #eee5da;
  color: var(--color-ink-soft);
  text-decoration: none;
}
.seller-contact__store-pill[hidden] {
  display: none;
}
.seller-contact__store-pill-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 999px;
  background: rgba(35, 32, 48, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.seller-contact__store-pill[style*="background"] .seller-contact__store-pill-icon {
  background: rgba(255, 255, 255, 0.24);
}
.seller-contact__store-pill-icon img {
  display: block;
  width: 13px;
  height: 13px;
}
.seller-contact__store-pill-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  color: inherit;
  line-height: 1.2;
}
.seller-contact__store-pill:hover,
.seller-contact__store-pill:focus-visible {
  filter: brightness(0.97);
  outline: 0;
}
.seller-contact__panel-status {
  font-size: 12px;
  color: var(--color-ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.seller-contact__panel-status::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--color-ink-muted);
}
.seller-contact[data-status="online"] .seller-contact__panel-status { color: var(--color-forest); font-weight: 600; }
.seller-contact[data-status="online"] .seller-contact__panel-status::before { background: var(--color-forest); }
.seller-contact[data-status="recent"] .seller-contact__panel-status { color: var(--color-warn); font-weight: 600; }
.seller-contact[data-status="recent"] .seller-contact__panel-status::before { background: var(--color-warn); }
.seller-contact[data-status="offline"] .seller-contact__panel-status { color: var(--color-ink-soft); font-weight: 600; }
.seller-contact[data-status="offline"] .seller-contact__panel-status::before { background: var(--color-line-dark); }

/* Close button — mirrors the shared auth-popup close contract on desktop. */
.seller-contact__close {
  display: none;
  position: absolute;
  top: 0;
  left: calc(100% + var(--popup-close-offset, 10px));
  right: auto;
  z-index: 8;
  border: 0;
  background: var(--popup-bg, var(--color-cream));
  box-shadow: var(--popup-shadow-soft);
  font-size: 0;
  line-height: 1;
  color: var(--color-ink);
  cursor: pointer;
  width: var(--popup-close-width, 78px);
  height: var(--popup-close-height, 55px);
  border-radius: var(--radius-pill, 999px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: background-color 0.24s ease, filter 0.24s ease;
  will-change: transform;
}
.seller-contact[data-open] .seller-contact__close {
  display: inline-flex;
}
.seller-contact__close[hidden] {
  display: none !important;
}
.seller-contact__close:hover,
.seller-contact__close:focus-visible {
  background-color: var(--popup-close-hover-bg, var(--sort-control-bg));
  filter: var(--popup-close-hover-filter);
  animation: header-auth-close-bounce 0.28s cubic-bezier(0.23, 1.3, 0.32, 1) both;
}
.seller-contact__close:active {
  transform: none;
}
.seller-contact__close:focus-visible {
  outline: 2px solid var(--popup-focus);
  outline-offset: 2px;
}
.seller-contact__close img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--popup-close-icon-size, 17px);
  height: var(--popup-close-icon-size, 17px);
  display: block;
  max-width: none;
  object-fit: contain;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.seller-contact__hint {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-ink);
}

.seller-contact__thread {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px 18px 16px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--color-page-bg) 34%, transparent), transparent 120px),
    var(--color-cream);
}

.seller-contact__product {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--color-line) 78%, transparent);
  border-radius: 20px;
  color: var(--color-ink);
  text-decoration: none;
  background: color-mix(in srgb, var(--color-page-bg) 54%, var(--color-cream));
}

.seller-contact__product:hover,
.seller-contact__product:focus-visible {
  border-color: var(--color-ink);
  outline: 0;
}

.seller-contact__product-thumb {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--color-line) 82%, transparent);
  background: var(--color-sand) center / cover no-repeat;
}

.seller-contact__product-thumb[data-empty="1"] {
  background:
    radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--color-forest) 24%, transparent), transparent 32%),
    var(--color-sand);
}

.seller-contact__product-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.seller-contact__product-kicker {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-forest);
  text-transform: uppercase;
  letter-spacing: 0;
}

.seller-contact__product-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-heading);
  font-size: 13px;
  line-height: 1.25;
}

.seller-contact__product-copy small {
  font-size: 12px;
  color: var(--color-ink-soft);
}

.seller-contact__messages {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.seller-contact__msg {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  width: 100%;
}

.seller-contact__msg--me {
  justify-content: flex-start;
  flex-direction: row-reverse;
}

.seller-contact__msg--them {
  justify-content: flex-start;
}

.seller-contact__msg-avatar {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--color-forest);
  color: var(--color-cream);
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.seller-contact__msg-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.seller-contact__msg-avatar--profile-art {
  border-radius: 0;
  overflow: visible;
  background: transparent;
}

.seller-contact__msg-avatar--profile-art img {
  object-fit: contain;
  border-radius: 0;
}

/* Content column: media (frameless) and the text bubble stack vertically and
   align to the sender's side. */
.seller-contact__stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  max-width: min(300px, 82%);
}
.seller-contact__msg--me .seller-contact__stack { align-items: flex-end; }
.seller-contact__msg--them .seller-contact__stack { align-items: flex-start; }

/* Frameless media zone — photos/product/file cards sit on the chat surface,
   never inside a coloured bubble. */
.seller-contact__media {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 280px;
  min-width: 0;
}
.seller-contact__msg--me .seller-contact__media { align-items: flex-end; }

/* Photo album — one message, up to 10 tiles, layout adapts to the count. */
.seller-contact__album {
  display: grid;
  gap: 3px;
  border-radius: 16px;
  overflow: hidden;
  max-width: 280px;
}
.seller-contact__album[data-count="2"],
.seller-contact__album[data-count="4"] { grid-template-columns: repeat(2, 1fr); }
.seller-contact__album[data-count="3"],
.seller-contact__album[data-count="5"],
.seller-contact__album[data-count="6"],
.seller-contact__album[data-count="7"],
.seller-contact__album[data-count="8"],
.seller-contact__album[data-count="9"],
.seller-contact__album[data-count="10"] { grid-template-columns: repeat(3, 1fr); }

.seller-contact__album-cell {
  display: block;
  overflow: hidden;
  background: color-mix(in srgb, var(--color-line) 45%, transparent);
}
.seller-contact__album:not([data-count="1"]) .seller-contact__album-cell {
  aspect-ratio: 1 / 1;
}
.seller-contact__album-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Failed image → soft tile + muted photo glyph instead of the browser's stark
   broken-image icon (onerror flags the cell). */
.seller-contact__album-cell.is-broken {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  min-height: 90px;
  background: var(--color-cream);
}
.seller-contact__album-cell.is-broken .seller-contact__album-img { display: none; }
.seller-contact__album-cell.is-broken::after {
  content: "";
  width: 34px;
  height: 34px;
  opacity: .5;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3a693' stroke-width='1.6'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.6'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* Single photo keeps its natural shape, just capped. min-size keeps the tile
   from collapsing to 0 (which, with a not-yet-decoded image, would hide the
   message entirely). */
.seller-contact__album[data-count="1"] { display: inline-block; }
.seller-contact__album[data-count="1"] .seller-contact__album-cell {
  aspect-ratio: auto;
  min-width: 120px;
  min-height: 90px;
}
.seller-contact__album[data-count="1"] .seller-contact__album-img {
  width: auto;
  height: auto;
  max-width: 260px;
  max-height: 320px;
}

/* Media-only messages carry the timestamp/receipt as a bare row. */
.seller-contact__bare-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 2px;
  font-size: 11px;
  color: var(--color-ink-soft);
}
.seller-contact__msg--media-only .seller-contact__media-reply {
  max-width: 280px;
}

.seller-contact__bubble {
  position: relative;
  --seller-contact-transcript-bg: var(--color-ink);
  --seller-contact-transcript-hover-bg: color-mix(in srgb, var(--color-ink) 88%, var(--intent-surface-page));
  max-width: min(320px, 82%);
  border-radius: 20px;
  padding: 10px 12px 8px;
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  font-size: 14px;
  line-height: 1.35;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--color-line) 60%, transparent);
}

/* Both bubbles are light and low-contrast (Steven's pick): the seller's is
   near-white cream, mine is a warm sand. Photos live outside, so these only
   ever wrap text/voice. */
.seller-contact__msg--them .seller-contact__bubble {
  background: var(--color-cream);
  color: var(--color-ink);
  border: 1px solid color-mix(in srgb, var(--color-line) 70%, transparent);
  border-bottom-left-radius: 8px;
}

.seller-contact__msg--me .seller-contact__bubble {
  --seller-contact-transcript-bg: var(--color-ink);
  --seller-contact-transcript-hover-bg: color-mix(in srgb, var(--color-ink) 88%, var(--intent-surface-page));
  background: var(--color-sand);
  color: var(--color-ink);
  border: 1px solid color-mix(in srgb, var(--color-line) 90%, transparent);
  border-bottom-right-radius: 8px;
}
/* Compound selector (0,2,0) so it wins the tie against the me/them bubble
   colour rules above — otherwise the invoice card gets repainted sand/cream. */
.seller-contact__bubble.seller-contact__bubble--invoice {
  width: min(320px, 86%);
  max-width: min(320px, 86%);
  padding: 0;
  gap: 8px;
  overflow: hidden;
  background: var(--color-page-bg);
  border: 1px solid color-mix(in srgb, var(--color-line) 78%, transparent);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--color-ink) 10%, transparent);
}

.seller-contact__bubble--audio {
  overflow: visible;
}
.seller-contact__bubble--invoice .seller-contact__bubble-text {
  padding: 12px 13px 0;
}

.seller-contact__audio {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 168px;
}

.seller-contact__audio-block {
  display: block;
  min-width: min(240px, 100%);
}

.seller-contact__audio-play {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: color-mix(in srgb, currentColor 16%, transparent);
  color: inherit;
}

.seller-contact__audio-play svg {
  width: 16px;
  height: 16px;
}

.seller-contact__audio-wave {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 24px;
  min-width: 60px;
  cursor: pointer; /* click-to-seek */
}

.seller-contact__audio-wave span {
  flex: 1 1 auto;
  min-width: 2px;
  border-radius: 2px;
  background: color-mix(in srgb, currentColor 42%, transparent);
}

.seller-contact__audio.is-playing .seller-contact__audio-wave span {
  background: color-mix(in srgb, currentColor 58%, transparent);
}

/* Played part of the track fills solid so progress is visible. */
.seller-contact__audio-wave span.is-played {
  background: currentColor;
}

.seller-contact__audio-time {
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 800;
  opacity: .8;
}

.seller-contact__audio-transcript-toggle {
  position: absolute;
  left: -36px;
  bottom: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--seller-contact-transcript-bg, var(--color-ink));
  color: var(--intent-surface-page, var(--color-cream));
  font-size: 0;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--color-ink) 14%, transparent);
}

.seller-contact__msg--them .seller-contact__bubble--audio {
  margin-left: 42px;
}

.seller-contact__audio-transcript-toggle img {
  display: block;
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.seller-contact__audio-transcript-toggle:hover,
.seller-contact__audio-transcript-toggle:focus-visible,
.seller-contact__audio-transcript-toggle[aria-expanded="true"] {
  background: var(--seller-contact-transcript-hover-bg, color-mix(in srgb, var(--color-ink) 88%, var(--intent-surface-page)));
  outline: 0;
}

/* Visible transcript sheet under the waveform (was a screen-reader-only
   1×1 clip rect, so the toggle looked dead — nothing ever appeared). */
.seller-contact__audio-transcript {
  display: block;
  margin-top: 8px;
  padding: 8px 11px;
  border-radius: 12px;
  background: color-mix(in srgb, currentColor 10%, transparent);
  font-size: 12.5px;
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: anywhere;
}

.seller-contact__audio-transcript[hidden] {
  display: none;
}

.seller-contact__audio-transcript.is-empty {
  opacity: .78;
  font-style: italic;
}

.seller-contact__invoice {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 13px;
  color: var(--color-ink);
}
.seller-contact__invoice-kicker {
  width: fit-content;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-forest) 12%, transparent);
  color: var(--color-forest);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  padding: 5px 8px;
  text-transform: uppercase;
  letter-spacing: 0;
}
.seller-contact__invoice-title {
  font-family: var(--font-heading);
  font-size: 14px;
  line-height: 1.2;
}
.seller-contact__invoice-subtitle {
  color: var(--color-ink-soft);
  font-size: 12px;
  line-height: 1.25;
}
.seller-contact__invoice-amount {
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 800;
  line-height: 1;
  color: var(--color-forest);
}
.seller-contact__invoice-row,
.seller-contact__invoice-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  font-size: 11px;
  line-height: 1.2;
}
.seller-contact__invoice-row {
  padding-top: 7px;
  border-top: 1px solid color-mix(in srgb, var(--color-line) 70%, transparent);
  color: var(--color-ink-soft);
}
.seller-contact__invoice-row strong {
  color: var(--color-ink);
  text-align: right;
}
.seller-contact__invoice-foot {
  color: var(--color-ink-soft);
}
.seller-contact__invoice-status {
  border-radius: 999px;
  padding: 4px 8px;
  background: color-mix(in srgb, var(--color-forest) 12%, transparent);
  color: var(--color-forest);
  font-weight: 800;
}
.seller-contact__invoice-status--paid {
  background: color-mix(in srgb, var(--intent-feedback-success) 16%, transparent);
  color: var(--intent-feedback-success);
}
.seller-contact__invoice-status--expired {
  background: color-mix(in srgb, var(--color-alert-red) 12%, transparent);
  color: var(--color-alert-red);
}
.seller-contact__invoice-action {
  width: 100%;
  min-height: 42px;
  border: 0;
  border-radius: 999px;
  background: var(--color-forest);
  color: var(--color-cream);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.18s ease, box-shadow 0.18s ease;
}
.seller-contact__invoice-action:hover,
.seller-contact__invoice-action:focus-visible {
  background: var(--color-forest-dark);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--color-ink) 14%, transparent);
  outline: 0;
}

.seller-contact__bubble-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.seller-contact__bubble-meta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  font-size: 10px;
  line-height: 1;
  opacity: 0.74;
}

.seller-contact__reply-block {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 7px;
  border-radius: 14px;
  background: color-mix(in srgb, currentColor 8%, transparent);
  color: inherit;
}

.seller-contact__reply-block--compact {
  grid-template-columns: minmax(0, 1fr);
  padding: 0;
  background: transparent;
}

.seller-contact__reply-block--compact .seller-contact__reply-author {
  display: none;
}

.seller-contact__reply-mini-avatar {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--color-forest);
  color: var(--color-cream);
  font-family: var(--font-heading);
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
}

.seller-contact__reply-mini-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.seller-contact__reply-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.seller-contact__reply-author,
.seller-contact__reply-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.seller-contact__reply-author {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 800;
}

.seller-contact__reply-text {
  font-size: 12px;
  font-weight: 700;
  opacity: 0.78;
}

.seller-contact__reply-button {
  appearance: none;
  min-height: 24px;
  border: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  background: color-mix(in srgb, currentColor 12%, transparent);
  color: inherit;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.seller-contact__reply-button > span:first-child {
  display: inline-block;
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  background: currentColor;
  -webkit-mask: url("/assets/gift-room-icons/shared/arrow-back-up.svg") center / contain no-repeat;
  mask: url("/assets/gift-room-icons/shared/arrow-back-up.svg") center / contain no-repeat;
}

.seller-contact__reply-button:hover,
.seller-contact__reply-button:focus-visible {
  background: color-mix(in srgb, currentColor 18%, transparent);
  outline: 0;
}

.seller-contact__receipt {
  display: inline-flex;
  align-items: center;
  color: color-mix(in srgb, currentColor 60%, transparent);
}

.seller-contact__receipt.is-read {
  color: var(--intent-feedback-success);
}

.seller-contact__check {
  width: 13px;
  height: 9px;
}

.seller-contact__receipt .seller-contact__check + .seller-contact__check {
  margin-left: -5px;
}

.seller-contact__field {
  position: relative;
  display: block;
  padding-top: 0;
  min-width: 0;
}
.seller-contact__label {
  position: absolute;
  top: -8px;
  left: 18px;
  z-index: 2;
  border-radius: 999px;
  background: var(--color-cream);
  color: var(--color-ink);
  font-size: 12px;
  font-weight: 800;
  line-height: 15px;
  padding: 0 6px;
  pointer-events: none;
}
.seller-contact__textarea {
  display: block;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  border: 1.5px solid color-mix(in srgb, var(--color-ink) 22%, transparent);
  border-radius: 20px;
  background: var(--color-cream);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 12.75px;
  font-weight: 500;
  line-height: 1.45;
  padding: 10px 56px 10px 15px;
  min-height: 62px;
  max-height: 132px;
  resize: none;
  outline: none;
  box-sizing: border-box;
  overflow-y: auto;
  transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}
.seller-contact__textarea:focus {
  border-color: var(--color-forest, var(--color-ink));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-forest) 12%, transparent);
}
.seller-contact__counter {
  position: absolute;
  top: 14px;
  right: 16px;
  font-size: 11px;
  color: var(--color-ink-soft);
  background: color-mix(in srgb, var(--color-cream) 86%, transparent);
  padding: 2px 7px;
  border-radius: 999px;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  opacity: 0.76;
}
.seller-contact__counter[data-state="warning"] { color: var(--color-alert-red); }

.seller-contact__actions {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  min-width: 0;
}
.seller-contact__composer {
  flex: 0 0 auto;
  display: grid;
  gap: 6px;
  padding: 7px 10px 5px;
  background: var(--color-cream);
  border-top: 1px solid color-mix(in srgb, var(--color-line) 72%, transparent);
}

.seller-contact__composer.is-recording .seller-contact__field,
.seller-contact__composer.is-recording .seller-contact__actions,
.seller-contact__composer.is-recording .seller-contact__pending,
.seller-contact__composer.is-recording .seller-contact__reply-preview {
  display: none;
}

.seller-contact__recording {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 11px;
  min-height: 58px;
  padding: 8px 8px 8px 14px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-cream);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--color-ink) 14%, transparent);
}

.seller-contact__recording-dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-alert-red);
  animation: seller-contact-recording-pulse 1s infinite ease-in-out;
}

@keyframes seller-contact-recording-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.8); }
}

.seller-contact__recording-time {
  flex: 0 0 auto;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: currentColor;
}

.seller-contact__recording-wave,
.workspace-recording__wave {
  position: relative;
  flex: 1 1 auto;
  min-width: 86px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  padding: 0 2px;
  border-radius: var(--radius-pill);
  background: transparent;
  overflow: hidden;
}

.seller-contact__recording-wave::before,
.workspace-recording__wave::before {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: 50%;
  border-top: 2px dotted color-mix(in srgb, var(--color-cream) 48%, transparent);
  transform: translateY(-50%);
}

.seller-contact__recording-wave i,
.workspace-recording__wave i {
  position: relative;
  z-index: 1;
  flex: 0 0 3px;
  width: 3px;
  height: var(--recording-bar-h, 14px);
  max-height: 34px;
  border-radius: var(--radius-pill);
  background: var(--color-cream);
  opacity: 0.92;
  animation: seller-contact-recording-wave 0.82s ease-in-out infinite;
  animation-delay: var(--recording-bar-delay, 0s);
}

.seller-contact__recording-wave i:nth-child(2),
.workspace-recording__wave i:nth-child(2) { height: 16px; animation-delay: 0.08s; }
.seller-contact__recording-wave i:nth-child(3),
.workspace-recording__wave i:nth-child(3) { height: 22px; animation-delay: 0.16s; }
.seller-contact__recording-wave i:nth-child(4),
.workspace-recording__wave i:nth-child(4) { height: 14px; animation-delay: 0.24s; }
.seller-contact__recording-wave i:nth-child(5),
.workspace-recording__wave i:nth-child(5) { height: 18px; animation-delay: 0.32s; }

@keyframes seller-contact-recording-wave {
  0%, 100% { transform: scaleY(0.68); opacity: 0.48; }
  50% { transform: scaleY(1); opacity: 1; }
}

.seller-contact__recording-hint {
  display: none;
}

.seller-contact__recording-cancel {
  position: relative;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-cream) 13%, transparent);
  color: var(--color-cream);
  font-size: 0;
  font-weight: 800;
  cursor: pointer;
  padding: 0;
}

.seller-contact__recording-cancel::before {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 11px;
  height: 11px;
  border-radius: 3px;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.seller-contact__recording-cancel:hover,
.seller-contact__recording-cancel:focus-visible {
  background: color-mix(in srgb, var(--color-cream) 20%, transparent);
  outline: 0;
}

.seller-contact__recording-send {
  appearance: none;
  flex: 0 0 auto;
  width: 38px;
  min-width: 38px;
  max-width: 38px;
  border: 0;
  border-radius: 50%;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-height: 38px;
  max-height: 38px;
  height: 38px;
  aspect-ratio: 1 / 1;
  padding: 0;
  background: var(--color-cream);
  color: var(--color-ink);
  font-family: var(--font-heading);
  font-size: 0;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.seller-contact__recording-send:hover,
.seller-contact__recording-send:focus-visible {
  outline: 0;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--color-ink) 16%, transparent);
}

.seller-contact__recording-send::before {
  display: none;
}

.seller-contact__recording-send::after {
  content: "";
  width: 18px;
  height: 15px;
  display: inline-block;
  background: currentColor;
  -webkit-mask: url("/assets/gift-room-icons/shared/send.svg") center / contain no-repeat;
  mask: url("/assets/gift-room-icons/shared/send.svg") center / contain no-repeat;
  transform: translateX(-2px);
}

.seller-contact__tool.is-recording {
  color: var(--color-alert-red);
}

.seller-contact__bar {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  grid-template-areas:
    "field field field"
    "attach spacer tail";
  align-items: center;
  gap: 9px;
}

.seller-contact__pending {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.seller-contact__pending[hidden] {
  display: none;
}

.seller-contact__reply-preview {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--color-line) 82%, transparent);
  border-radius: 16px;
  background: var(--color-page-bg);
}

.seller-contact__reply-preview[hidden] {
  display: none !important;
}

.seller-contact__reply-avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--color-forest);
  color: var(--color-cream);
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 900;
}

.seller-contact__reply-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.seller-contact__reply-preview-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
  color: var(--color-ink);
}

.seller-contact__reply-preview-copy > strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-heading);
  font-size: 13px;
  line-height: 1.15;
}

.seller-contact__reply-preview .seller-contact__reply-block {
  padding: 0;
  background: transparent;
}

.seller-contact__reply-clear {
  appearance: none;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--color-ink) 8%, transparent);
  color: var(--color-ink);
  cursor: pointer;
}

.seller-contact__reply-clear span {
  display: block;
  width: 13px;
  height: 13px;
  background: url("/assets/gift-room-icons/shared/x.svg") center / contain no-repeat;
}

.seller-contact__reply-clear:hover,
.seller-contact__reply-clear:focus-visible {
  background: color-mix(in srgb, var(--color-ink) 13%, transparent);
  outline: 0;
}

.seller-contact__attachment {
  max-width: 100%;
  min-height: 36px;
  display: inline-grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 6px 9px 6px 7px;
  border: 1px solid color-mix(in srgb, var(--color-line) 82%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--color-page-bg) 60%, var(--color-cream));
  color: var(--color-ink);
}
.seller-contact__attachment-icon {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* background-COLOR only — the `background` shorthand would reset the
     thumb's background-size:cover / no-repeat (this rule + the --product one
     below out-specify the --thumb rule), tiling the image from its corner. */
  background-color: color-mix(in srgb, var(--color-forest) 12%, transparent);
}
.seller-contact__attachment--product .seller-contact__attachment-icon {
  background-color: color-mix(in srgb, var(--color-forest) 15%, transparent);
}
.seller-contact__attachment-icon img {
  width: 15px;
  height: 15px;
  display: block;
}
/* Real preview thumb (photo / product / gift image) instead of a glyph. */
.seller-contact__attachment-icon--thumb {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background-color: var(--color-sand);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.seller-contact__attachment:has(.seller-contact__attachment-icon--thumb) {
  grid-template-columns: 34px minmax(0, 1fr) auto;
}
.seller-contact__attachment-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.seller-contact__attachment-copy strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-heading);
  font-size: 12px;
  line-height: 1.15;
}
.seller-contact__attachment-copy small {
  font-size: 10px;
  color: var(--color-ink-soft);
  line-height: 1;
}
.seller-contact__attachment-remove {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--color-ink-soft);
  cursor: pointer;
  font-size: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.seller-contact__attachment-remove::before {
  content: "";
  width: 12px;
  height: 12px;
  display: block;
  background: url("/assets/gift-room-icons/shared/x.svg") center / contain no-repeat;
}
.seller-contact__attachment-remove:hover,
.seller-contact__attachment-remove:focus-visible {
  background: color-mix(in srgb, var(--color-alert-red) 12%, transparent);
  color: var(--color-alert-red);
  outline: 0;
}

.seller-contact__bubble-attachments {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.seller-contact__bubble-attachments .seller-contact__attachment {
  max-width: 260px;
}

.seller-contact__attach {
  display: flex;
  gap: 8px;
  min-width: 0;
}

.seller-contact__tool {
  position: relative;
  z-index: 0;
  box-sizing: border-box;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  min-width: 46px;
  max-width: 46px;
  min-height: 46px;
  max-height: 46px;
  aspect-ratio: 1 / 1;
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--color-ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  box-shadow: none;
  transition: color 0.18s ease;
}
.seller-contact__tool::before {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: -1;
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 3px var(--color-ink);
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.18s ease, box-shadow 0.18s ease;
}
.seller-contact__tool img {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  display: block;
  object-fit: contain;
  pointer-events: none;
}
.seller-contact__tool span {
  display: none;
}
.seller-contact__tool:hover,
.seller-contact__tool:focus-visible {
  outline: 0;
}
.seller-contact__tool:hover::before,
.seller-contact__tool:focus-visible::before {
  transform: scale(1.026);
}
.seller-contact__tool:active {
  transform: none;
}
.seller-contact__tool.is-listening {
  color: var(--color-cream);
}
.seller-contact__tool.is-listening::before {
  background: var(--color-forest);
  box-shadow: none;
}
.seller-contact__tool.is-listening img {
  filter: brightness(0) invert(1);
}
.seller-contact__tail {
  grid-area: tail;
  justify-self: end;
  position: relative;
  width: 48px;
  height: 48px;
  display: block;
}
.seller-contact__tail .seller-contact__tool,
.seller-contact__tail .seller-contact__send {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
}

.seller-contact__send {
  box-sizing: border-box;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  min-width: 46px;
  max-width: 46px;
  max-height: 46px;
  border: 0;
  background: transparent;
  color: var(--color-cream);
  border-radius: 50%;
  padding: 0;
  gap: 0;
  min-height: 46px;
  aspect-ratio: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  overflow: visible;
  transition: color 0.2s ease;
}
.seller-contact__send::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--color-forest);
  transform: scale(1);
  transform-origin: center;
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.2s ease;
  z-index: -1;
  pointer-events: none;
}
.seller-contact__send[hidden],
.seller-contact__tool[hidden] {
  display: none !important;
}
.seller-contact__send img {
  order: -1;
  width: 18px;
  height: 15px;
  flex: 0 0 18px;
  display: block;
  margin: 0;
  object-fit: contain;
  pointer-events: none;
  transform: translateX(-2px);
}
.seller-contact__send:not(:disabled) img {
  filter: brightness(0) invert(1);
  opacity: 1;
}
.seller-contact__send:hover:not(:disabled)::before,
.seller-contact__send:focus-visible:not(:disabled)::before {
  transform: scale(1.025);
  background: var(--color-forest-dark);
}
.seller-contact__send:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--color-forest) 32%, transparent);
  outline-offset: 3px;
}
.seller-contact__send[disabled] {
  color: var(--auth-disabled-text);
  cursor: not-allowed;
  opacity: 1;
}
.seller-contact__send[disabled] img {
  opacity: 0.52;
}
.seller-contact__send[disabled]::before {
  background: var(--control-disabled-bg);
  transform: none;
}
.seller-contact__send.is-sent {
  color: var(--color-cream);
  pointer-events: none;
}
.seller-contact__send.is-sent::before {
  background: var(--intent-feedback-success);
}
.seller-contact__legal {
  font-size: 11px;
  color: var(--color-ink-soft);
  text-align: center;
  flex: 0 0 auto;
  padding: 0 18px 16px;
  background: var(--color-cream);
}

/* `display: flex` would beat the UA [hidden] rule — the dev-only demo
   switcher must never render for real visitors. */
.seller-contact__demo[hidden] {
  display: none;
}
.seller-contact__demo {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  background: rgba(35, 32, 48, 0.04);
  border-radius: 999px;
  font-size: 11px;
  color: var(--color-ink-soft);
  align-self: flex-start;
}
.seller-contact__demo-label { margin: 0 6px; font-weight: 600; }
.seller-contact__demo-btn {
  border: 0;
  background: transparent;
  color: var(--color-ink-soft);
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
}
.seller-contact__demo-btn.is-active {
  background: var(--color-ink);
  color: var(--color-page-bg);
}

/* Tight viewports (mobile): drop the CTA chip, keep avatar + name + meta. */
@media (max-width: 420px) {
  .seller-contact__cta { display: none; }
  .seller-contact__pill { padding: 6px 14px 6px 6px; }
}
/* Ultra-narrow: collapse to avatar-only. */
@media (max-width: 320px) {
  .seller-contact__pill { padding: 4px; gap: 0; }
  .seller-contact__info { display: none; }
}

/* Mobile: the close is the site-wide floating X pill ABOVE the sheet
   (JEDI_SHEET_FLOATING_CLOSE canon, see styles/homepage.css). The close is a
   sibling of the fixed panel, so it is fixed to the viewport just above the
   panel's known top edge. Steven 2026-07-23. */
@media (max-width: 760px) {
  .seller-contact__close {
    position: fixed;
    top: calc(clamp(72px, 11vh, 112px) - var(--popup-sheet-close-height, 55px) - var(--popup-close-offset, 10px));
    bottom: auto;
    left: calc(50% - (var(--popup-sheet-close-width, 78px) / 2));
    right: auto;
    width: var(--popup-sheet-close-width, 78px);
    height: var(--popup-sheet-close-height, 55px);
    background: var(--popup-bg);
    box-shadow: var(--popup-shadow-soft);
    /* Stay tappable — exclude from the drag zone's touch-action. */
    touch-action: auto;
  }
}

/* While the mobile chat sheet is open it owns the bottom edge — hide the
   mobile bottom nav bar (same canon as the other sheets). */
body.seller-contact-open .fixed-header .header-mobile-bottom-bar {
  opacity: 0 !important;
  pointer-events: none !important;
}