/* Corner floating shopping character → side chat panel */
#sale-agent-hero-host {
  --sh-ink: #141416;
  --sh-muted: #6b6b73;
  --sh-line: rgba(20, 20, 22, 0.1);
  --sh-accent: #0a7cff;
  --sh-danger: #e11d48;
  --sh-panel: #ffffff;
  --sh-ox: 20px;
  --sh-oy: 20px;
  position: fixed !important;
  z-index: 2147483000 !important;
  right: var(--sh-ox) !important;
  bottom: var(--sh-oy) !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  max-width: min(420px, calc(100vw - 16px)) !important;
  height: auto !important;
  pointer-events: none !important;
  font-family: "Segoe UI", Inter, system-ui, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  color: var(--sh-ink) !important;
  isolation: isolate !important;
}

#sale-agent-hero-host *,
#sale-agent-hero-host *::before,
#sale-agent-hero-host *::after {
  box-sizing: border-box !important;
  max-width: 100% !important;
}

#sale-agent-hero-host button,
#sale-agent-hero-host input,
#sale-agent-hero-host a,
#sale-agent-hero-host p,
#sale-agent-hero-host h3,
#sale-agent-hero-host h4,
#sale-agent-hero-host span,
#sale-agent-hero-host strong,
#sale-agent-hero-host .sh-panel,
#sale-agent-hero-host .sh-body,
#sale-agent-hero-host .sh-messages,
#sale-agent-hero-host .sh-composer,
#sale-agent-hero-host .sh-contact {
  font-family: inherit !important;
  pointer-events: auto !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

#sale-agent-hero-host[data-corner="bl"] {
  right: auto !important;
  left: var(--sh-ox) !important;
}

#sale-agent-hero-host[data-corner="tr"] {
  bottom: auto !important;
  top: var(--sh-oy) !important;
}

#sale-agent-hero-host[data-corner="tl"] {
  right: auto !important;
  left: var(--sh-ox) !important;
  bottom: auto !important;
  top: var(--sh-oy) !important;
}

/* Idle launcher: character + speech chip */
.sh-launcher {
  pointer-events: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 10px !important;
  max-width: 220px !important;
}

#sale-agent-hero-host[data-corner="bl"] .sh-launcher,
#sale-agent-hero-host[data-corner="tl"] .sh-launcher {
  align-items: flex-start !important;
}

.sh-chip {
  position: relative !important;
  display: block !important;
  width: 160px !important;
  max-width: 160px !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  background: #141416 !important;
  color: #fff !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2) !important;
  animation: sh-chip-in 0.45s ease both !important;
  cursor: pointer !important;
  border: 0 !important;
  text-align: left !important;
  overflow: hidden !important;
}

#sale-agent-hero-host[data-corner="bl"] .sh-chip,
#sale-agent-hero-host[data-corner="tl"] .sh-chip {
  border-radius: 14px !important;
}

.sh-chip strong {
  display: block !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.25 !important;
  color: #fff !important;
  overflow: hidden !important;
}

.sh-chip span {
  display: block !important;
  margin-top: 4px !important;
  font-size: 0.7rem !important;
  line-height: 1.35 !important;
  color: rgba(255, 255, 255, 0.72) !important;
  font-weight: 500 !important;
  overflow: hidden !important;
}

.sh-chip::after {
  display: none !important;
}

.sh-char-btn {
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
  width: 118px !important;
  position: relative !important;
  filter: drop-shadow(0 14px 22px rgba(15, 23, 42, 0.24)) !important;
  animation: sh-float 3.6s ease-in-out infinite !important;
  transition: transform 0.2s ease !important;
}

.sh-char-btn:hover {
  transform: translateY(-4px) scale(1.03) !important;
}

.sh-char-btn img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 28px !important;
  background: transparent !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}

.sh-char-fallback {
  width: 132px !important;
  height: 132px !important;
  border-radius: 28px !important;
  background: linear-gradient(145deg, #1d1d20, #3a3a42) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 2.4rem !important;
  font-weight: 700 !important;
}

.sh-char-glow {
  position: absolute !important;
  inset: 18% 8% 8% !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(10, 124, 255, 0.28), transparent 68%) !important;
  z-index: -1 !important;
  filter: blur(8px) !important;
  pointer-events: none !important;
}

#sale-agent-hero-host.is-open .sh-launcher {
  display: none !important;
}

/* Floating side chat */
.sh-panel {
  pointer-events: auto !important;
  display: none !important;
  width: min(400px, calc(100vw - 24px)) !important;
  height: min(640px, calc(100vh - 40px)) !important;
  flex-direction: column !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  background: var(--sh-panel) !important;
  border: 1px solid var(--sh-line) !important;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28) !important;
  backdrop-filter: blur(16px) !important;
}

#sale-agent-hero-host.is-open .sh-panel {
  display: flex !important;
  animation: sh-panel-in 0.28s ease !important;
}

.sh-head {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 12px 12px 14px !important;
  border-bottom: 1px solid var(--sh-line) !important;
  background: linear-gradient(180deg, #fafafa, #fff) !important;
}

.sh-head-avatar {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  background: #f0f0f2 !important;
  flex-shrink: 0 !important;
}

.sh-head-copy {
  flex: 1 !important;
  min-width: 0 !important;
}

.sh-head-copy h3 {
  margin: 0 !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

.sh-head-copy p {
  margin: 2px 0 0 !important;
  font-size: 0.72rem !important;
  color: var(--sh-muted) !important;
}

.sh-head-actions {
  display: flex !important;
  gap: 6px !important;
  align-items: center !important;
}

.sh-icon-btn {
  border: 1px solid var(--sh-line) !important;
  background: #fff !important;
  color: var(--sh-ink) !important;
  border-radius: 999px !important;
  padding: 7px 11px !important;
  font-size: 0.72rem !important;
  font-weight: 650 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

.sh-icon-btn.is-live {
  background: var(--sh-danger) !important;
  border-color: transparent !important;
  color: #fff !important;
}

.sh-icon-btn.sh-close {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  font-size: 1.05rem !important;
  line-height: 1 !important;
}

.sh-live-bar {
  display: none !important;
  padding: 6px 14px !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  color: #9f1239 !important;
  background: #fff1f2 !important;
  border-bottom: 1px solid #fecdd3 !important;
}

#sale-agent-hero-host.is-live .sh-live-bar {
  display: block !important;
}

.sh-body {
  flex: 1 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.sh-messages {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: scroll !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
  pointer-events: auto !important;
  padding: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  background: linear-gradient(180deg, #f7f7f8, #fff 40%) !important;
}

.sh-msg {
  max-width: 88% !important;
  padding: 10px 12px !important;
  border-radius: 16px !important;
  font-size: 0.88rem !important;
  line-height: 1.4 !important;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  overflow: visible !important;
}

.sh-msg.agent {
  align-self: flex-start !important;
  background: #fff !important;
  border: 1px solid var(--sh-line) !important;
  border-bottom-left-radius: 6px !important;
}

.sh-msg.user {
  align-self: flex-end !important;
  background: #e8f1ff !important;
  border-bottom-right-radius: 6px !important;
}

.sh-msg.sh-connecting {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: #1e3a8a !important;
  font-size: 0.88rem !important;
  background: #eef3ff !important;
  border: 1px solid #c7d7fe !important;
  box-shadow: 0 6px 18px rgba(59, 99, 246, 0.12) !important;
}

.sh-connecting-label {
  font-weight: 700 !important;
}

.sh-dots {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.sh-dots i {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #3b63f6 !important;
  display: block !important;
  animation: sh-blob 1.05s ease-in-out infinite !important;
}

.sh-dots i:nth-child(2) {
  animation-delay: 0.15s !important;
}

.sh-dots i:nth-child(3) {
  animation-delay: 0.3s !important;
}

@keyframes sh-blob {
  0%,
  80%,
  100% {
    transform: translateY(0) scale(0.85);
    opacity: 0.35;
  }
  40% {
    transform: translateY(-5px) scale(1.05);
    opacity: 1;
  }
}

.sh-connect-banner {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 10px 14px !important;
  background: linear-gradient(90deg, #e8efff, #f4f7ff) !important;
  border-bottom: 1px solid #d5e0ff !important;
  color: #1e3a8a !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
}

.sh-connect-banner[hidden] {
  display: none !important;
}

.sh-connect-banner-label {
  letter-spacing: 0.01em !important;
}

.sh-live-bar.is-connecting {
  display: block !important;
  background: #3b63f6 !important;
  color: #fff !important;
  font-weight: 700 !important;
}

.sh-voice-hud {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  border-bottom: 1px solid #dbe4ff !important;
  background: linear-gradient(90deg, #eef3ff, #f8faff) !important;
}

.sh-voice-hud[hidden] {
  display: none !important;
}

.sh-voice-pulse {
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: #22c55e !important;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55) !important;
  animation: sh-pulse 1.4s ease-out infinite !important;
  flex: 0 0 auto !important;
}

#sale-agent-hero-host.is-voice-user .sh-voice-pulse {
  background: #ef4444 !important;
  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5) !important;
}

#sale-agent-hero-host.is-voice-agent .sh-voice-pulse {
  background: #3b63f6 !important;
  box-shadow: 0 0 0 0 rgba(59, 99, 246, 0.5) !important;
}

#sale-agent-hero-host.is-voice-thinking .sh-voice-pulse {
  background: #f59e0b !important;
  animation: sh-pulse 0.9s ease-out infinite !important;
}

@keyframes sh-pulse {
  0% {
    transform: scale(0.9);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);
  }
  100% {
    transform: scale(0.9);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}

.sh-voice-meter {
  display: flex !important;
  align-items: flex-end !important;
  gap: 3px !important;
  height: 22px !important;
  flex: 0 0 auto !important;
}

.sh-voice-meter span {
  width: 4px !important;
  height: 6px !important;
  border-radius: 99px !important;
  background: #c7d2fe !important;
  transition: height 0.12s ease, background 0.12s ease !important;
}

.sh-voice-meter span:nth-child(1) { height: 6px !important; }
.sh-voice-meter span:nth-child(2) { height: 10px !important; }
.sh-voice-meter span:nth-child(3) { height: 14px !important; }
.sh-voice-meter span:nth-child(4) { height: 18px !important; }
.sh-voice-meter span:nth-child(5) { height: 22px !important; }

.sh-voice-meter span.is-on {
  background: #3b63f6 !important;
}

#sale-agent-hero-host.is-voice-user .sh-voice-meter span.is-on {
  background: #ef4444 !important;
}

.sh-voice-hud-copy {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
}

.sh-voice-hud-copy strong {
  font-size: 0.84rem !important;
  color: #1e3a8a !important;
  line-height: 1.2 !important;
}

.sh-voice-hud-copy span {
  font-size: 0.74rem !important;
  color: #475569 !important;
  line-height: 1.25 !important;
}

.sh-msg.sh-voice-hint {
  align-self: stretch !important;
  max-width: 100% !important;
  background: #f8fafc !important;
  border: 1px dashed #cbd5e1 !important;
  color: #334155 !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  text-align: center !important;
}

#sale-agent-hero-host.is-connecting .sh-composer input,
#sale-agent-hero-host.is-connecting .sh-composer button {
  opacity: 0.5 !important;
  pointer-events: none !important;
}

#sale-agent-hero-host.is-connecting .sh-panel {
  outline: 2px solid rgba(59, 99, 246, 0.35) !important;
}

/* Inline product carousel inside chat thread */
.sh-carousel {
  align-self: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 2px 0 4px !important;
}

.sh-carousel-label {
  margin: 0 0 8px 2px !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--sh-muted) !important;
}

.sh-carousel-track {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 2px 2px 10px !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin !important;
}

.sh-carousel-track::-webkit-scrollbar {
  height: 5px !important;
}

.sh-carousel-track::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18) !important;
  border-radius: 999px !important;
}

.sh-pcard {
  flex: 0 0 148px !important;
  width: 148px !important;
  scroll-snap-align: start !important;
  border-radius: 16px !important;
  border: 1px solid var(--sh-line) !important;
  background: #fff !important;
  overflow: hidden !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06) !important;
  display: flex !important;
  flex-direction: column !important;
}

.sh-pcard-media {
  aspect-ratio: 1 / 1 !important;
  background: #f2f2f4 !important;
  overflow: hidden !important;
}

.sh-pcard-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.sh-pcard-ph {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  font-size: 0.7rem !important;
  color: var(--sh-muted) !important;
}

.sh-pcard-body {
  padding: 8px 9px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  flex: 1 !important;
}

.sh-pcard-title {
  margin: 0 !important;
  font-size: 0.78rem !important;
  font-weight: 650 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.25 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 2em !important;
}

.sh-pcard-opts {
  margin: 0 !important;
  font-size: 0.68rem !important;
  color: var(--sh-muted) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.sh-pcard-price {
  margin: 4px 0 0 !important;
  font-size: 0.86rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

.sh-pcard-actions {
  display: flex !important;
  gap: 6px !important;
  margin-top: 8px !important;
  align-items: center !important;
}

.sh-pcard-add {
  flex: 1 !important;
  width: 100% !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 8px 10px !important;
  background: var(--sh-ink) !important;
  color: #fff !important;
  font-size: 0.7rem !important;
  font-weight: 650 !important;
  cursor: pointer !important;
  letter-spacing: -0.01em !important;
}

.sh-pcard-add.is-added {
  background: #16a34a !important;
}

.sh-carousel-hint {
  margin: 0 !important;
  font-size: 0.68rem !important;
  color: var(--sh-muted) !important;
  text-align: right !important;
  padding-right: 4px !important;
}

.sh-composer {
  display: flex !important;
  gap: 8px !important;
  padding: 10px 12px 12px !important;
  border-top: 1px solid var(--sh-line) !important;
  background: #fff !important;
  flex-shrink: 0 !important;
}

.sh-composer input {
  flex: 1 !important;
  border: 1px solid var(--sh-line) !important;
  border-radius: 12px !important;
  padding: 11px 12px !important;
  outline: none !important;
  font: inherit !important;
  font-size: 0.88rem !important;
}

.sh-composer button {
  border: 0 !important;
  border-radius: 12px !important;
  padding: 11px 14px !important;
  background: var(--sh-accent) !important;
  color: #fff !important;
  font-weight: 650 !important;
  cursor: pointer !important;
}

.sh-contact {
  align-self: stretch !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 10px 12px !important;
  border-radius: 16px !important;
  border: 1px solid var(--sh-line) !important;
  background: #fff !important;
}

.sh-contact a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  background: #141416 !important;
  color: #fff !important;
  text-decoration: none !important;
  font-size: 0.78rem !important;
  font-weight: 650 !important;
}

.sh-contact a.sh-contact-soft {
  background: #fff !important;
  color: var(--sh-ink) !important;
  border: 1px solid var(--sh-line) !important;
}

.sh-toast {
  position: absolute !important;
  left: 50% !important;
  bottom: 78px !important;
  transform: translateX(-50%) translateY(8px) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  background: #141416 !important;
  color: #fff !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  transition: 0.2s ease !important;
  white-space: nowrap !important;
}

.sh-toast.show {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) !important;
}

.sh-status-err {
  color: var(--sh-danger) !important;
  font-size: 0.8rem !important;
  padding: 0 14px 8px !important;
}

@keyframes sh-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

@keyframes sh-chip-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

@keyframes sh-chip-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes sh-panel-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 520px) {
  .sh-char-btn {
    width: 112px !important;
  }
  .sh-panel {
    width: calc(100vw - 16px) !important;
    height: min(78vh, 620px) !important;
  }
}