/* assets/css/social-toast.css — disappearing/appearing social-proof toast */
.st-wrap {
  /* The panel shell does not load style.css, so there is no global
     `box-sizing: border-box` reset there. Without this, `width: max-content`
     plus `max-width` caps the CONTENT box and the padding/border add ~29px on
     top, making the card visibly wider than max-width. */
  box-sizing: border-box;
  position: fixed; left: 20px; bottom: 26px; z-index: 9999;
  display: flex; align-items: center; gap: .6rem;
  max-width: 330px; min-width: 0; width: max-content;
  background: linear-gradient(135deg, var(--bg-color, #fff) 0%, color-mix(in srgb, var(--color-primary, #FF6A00) 7%, var(--bg-color, #fff)) 100%);
  color: var(--text-main, #1a1d20);
  border: 1px solid color-mix(in srgb, var(--color-primary, #FF6A00) 22%, var(--border-color, #e5e7eb));
  border-left: 3px solid var(--color-primary, #FF6A00);
  border-radius: 13px; padding: .62rem .78rem;
  box-shadow: 0 14px 34px rgba(0,0,0,.18), 0 3px 8px rgba(0,0,0,.06);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font-size: .8rem; line-height: 1.45; letter-spacing: .004em;
  opacity: 0; transform: translateY(14px) scale(.97);
  transition: opacity .5s cubic-bezier(.22,1,.36,1), transform .5s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
.st-wrap.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.st-wrap[hidden] { display: none !important; }
.st-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(145deg, #2a2f35, #0f1114); color: var(--color-primary, #FF6A00);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary, #FF6A00) 35%, transparent);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .86rem;
}
.st-body { min-width: 0; }
.st-text { font-weight: 600; }
.st-text b { font-weight: 800; }
.st-meta { font-size: .7rem; color: var(--text-muted, #64748b); font-weight: 600; margin-top: .1rem; }
.st-truck {
  width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0;
  background: color-mix(in srgb, var(--color-primary, #FF6A00) 18%, transparent);
  display: flex; align-items: center; justify-content: center; color: #8a6100;
}
.st-truck svg { width: 12px; height: 12px; }
[data-theme="dark"] .st-truck { color: var(--color-primary, #FF6A00); }
.st-close {
  border: none; background: transparent; cursor: pointer;
  font-size: .95rem; line-height: 1; color: var(--text-muted, #94a3b8);
  padding: .1rem .3rem; border-radius: 6px; margin-left: auto;
}
.st-close:hover { color: var(--text-main, #111); background: rgba(0,0,0,.06); }
[data-theme="dark"] .st-wrap {
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1208 100%); border-color: #2a2113; color: #fff;
  box-shadow: 0 24px 60px rgba(0,0,0,.75);
}
@media (max-width: 640px) {
  .st-wrap {
    left: 16px; right: 16px; max-width: none; width: auto;
    /* float CLOSE to the bottom, not flush with the screen edge:
       lifted above mobile browser chrome / thumb zone + safe-area */
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }
}
@media (prefers-reduced-motion: reduce) {
  .st-wrap { transition: none; }
}