/*
 * Weline_App · app-download 部件架构层 CSS
 * 规约：只写布局结构（排列/间距/响应式/焦点态），全部消费 Theme Token 变量；
 * 色彩/圆角/阴影的具体值由激活主题盘（--weline-theme-*）决定，此处不落裸值。
 */
.weline-app-download {
  display: block;
  margin-block: var(--weline-space-4);
}

.app-download__entry {
  display: flex;
  flex-wrap: wrap;
  gap: var(--weline-space-3);
  align-items: center;
}

.app-download__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--weline-space-2);
  padding-block: var(--weline-space-2);
  padding-inline: var(--weline-space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
  transition: filter 0.15s ease;
}

.app-download__btn:hover,
.app-download__btn:focus-visible {
  filter: brightness(0.96);
  outline: none;
}

.app-download__btn:focus-visible {
  outline: 2px solid var(--color-primary, currentColor);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .app-download__entry {
    flex-direction: column;
    align-items: stretch;
  }

  .app-download__btn {
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-download__btn {
    transition: none;
  }
}

/* ===== 悬浮形态（storefront-float-start 槽）===== */
[data-slot-id="storefront-float-start"] .weline-app-download {
  width: 100%;
  padding: var(--weline-space-3);
}

[data-slot-id="storefront-float-start"] .app-download__entry {
  flex-direction: column;
  gap: var(--weline-space-2);
}

[data-slot-id="storefront-float-start"] .app-download__btn {
  width: 100%;
  justify-content: center;
  font-size: var(--weline-font-size-xs, 12px);
}

[data-slot-id="storefront-float-start"] .weline-app-download[data-app-download-loaded]::after {
  content: '';
}

.weline-app-download:not([data-app-download-loaded]) [data-app-download-version] {
  opacity: .45;
}

/* ===== 二维码弹窗（桌面居中卡片 / 移动端底部抽屉）===== */
.app-download__modal {
  position: fixed;
  inset: 0;
  /* 高于悬浮层(2147482900)与其内部部件(如进店音乐 2147483001)，弹窗不能被压在下层 */
  z-index: 2147483100;
  display: grid;
  place-items: center;
  padding: var(--weline-space-5);
}

.app-download__modal[hidden] {
  display: none;
}

.app-download__scrim {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--weline-theme-text, #2e2a25) 42%, transparent);
}

.app-download__dialog {
  position: relative;
  width: min(100%, 40rem);
  max-height: calc(100vh - 2 * var(--weline-space-5));
  overflow: auto;
  padding: var(--weline-space-6);
  border: 1px solid var(--weline-theme-border, #e4dbcd);
  border-radius: var(--weline-radius-lg, 16px);
  background: var(--weline-theme-surface-raised, #fffdf8);
  box-shadow: var(--weline-theme-shadow-lg, 0 18px 48px rgba(46, 42, 37, .18));
}

.app-download__dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--weline-space-4);
}

.app-download__dialog-title {
  margin: 0;
  font: 600 var(--weline-font-size-lg, 18px)/1.3 var(--weline-font-serif, Georgia, serif);
}

.app-download__dialog-sub {
  margin: var(--weline-space-1) 0 0;
  color: var(--weline-theme-text-muted, #7b7268);
  font-size: var(--weline-font-size-sm, 13px);
}

.app-download__close {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--weline-theme-border, #e4dbcd);
  border-radius: 999px;
  background: var(--weline-theme-surface-raised, #fff);
  color: var(--weline-theme-text-muted, #7b7268);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.app-download__close:focus-visible {
  outline: 2px solid var(--weline-theme-primary, #a83a32);
  outline-offset: 2px;
}

.app-download__dialog-body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--weline-space-6);
  align-items: center;
  margin-top: var(--weline-space-5);
}

.app-download__qr {
  padding: var(--weline-space-3);
  border: 1px solid var(--weline-theme-border, #e4dbcd);
  border-radius: var(--radius-md, 10px);
  background: #fff;
  line-height: 0;
}

.app-download__qr img {
  display: block;
  width: 200px;
  height: 200px;
}

.app-download__plat {
  display: flex;
  flex-direction: column;
  gap: var(--weline-space-2);
}

.app-download__plat-row {
  display: flex;
  align-items: center;
  gap: var(--weline-space-2);
  padding: var(--weline-space-2) var(--weline-space-3);
  border: 1px solid var(--weline-theme-border, #e4dbcd);
  border-radius: var(--radius-md, 10px);
  background: var(--weline-theme-surface, #fffdf8);
  font-size: var(--weline-font-size-sm, 13px);
}

.app-download__plat-name {
  font-weight: 600;
}

.app-download__plat-meta {
  color: var(--weline-theme-text-muted, #7b7268);
}

.app-download__tag {
  margin-left: auto;
  padding: 1px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--weline-theme-border, #e4dbcd) 55%, transparent);
  color: var(--weline-theme-text-muted, #7b7268);
  font-size: var(--weline-font-size-xs, 12px);
}

.app-download__tag--on {
  background: color-mix(in srgb, var(--weline-theme-primary, #a83a32) 12%, transparent);
  color: var(--weline-theme-primary, #a83a32);
}

.app-download__center.app-download__btn {
  justify-content: center;
  margin-top: var(--weline-space-1);
  border-color: transparent;
  background: var(--weline-theme-primary, #a83a32);
  color: var(--weline-theme-on-primary, #fff);
}

.app-download__hint {
  color: var(--weline-theme-text-muted, #7b7268);
  font-size: var(--weline-font-size-xs, 12px);
}

@media (max-width: 640px) {
  .app-download__modal {
    padding: 0;
    place-items: end stretch;
  }

  .app-download__dialog {
    width: 100%;
    max-height: 92vh;
    padding: var(--weline-space-5) var(--weline-space-5) var(--weline-space-6);
    border-radius: var(--weline-radius-xl, 20px) var(--weline-radius-xl, 20px) 0 0;
  }

  .app-download__dialog-body {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: var(--weline-space-4);
  }

  .app-download__qr img {
    width: 176px;
    height: 176px;
  }

  .app-download__plat {
    width: 100%;
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-download__dialog,
  .app-download__close {
    transition: none;
  }
}


[data-widget-style-class="077587d4f9d73a11"] {position:static;display:block;width:0;height:0;margin:0;padding:0;border:0;overflow:visible;}

:root {
  --w-store-music-accent: var(--color-primary, var(--weline-theme-primary));
  --w-store-music-ink: var(--color-text);
  --w-store-music-surface: var(--color-surface);
  --w-store-music-muted: color-mix(in srgb, var(--w-store-music-ink) 55%, transparent);
  --w-store-music-shadow: var(--weline-theme-shadow-lg, 0 14px 32px color-mix(in srgb, var(--w-store-music-ink) 18%, transparent));
  /* Below Customer social (2147483000) / StoreMusic widget; ABOVE page chrome.
   * z=8 left bars painted but buried under opaque sections → 「开了波形却看不见」. */
  --w-store-music-z-wave: 2147482900;
  /* Above Customer social quick bar (2147483000) so avatar is not covered */
  --w-store-music-z-widget: 2147483001;
}

.w-store-music-wave {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: var(--w-store-music-z-wave);
  /* Body-bottom music columns: stay readable on light grocery/cream themes. */
  opacity: 0.72;
  mix-blend-mode: normal;
}

/* Keep portrait player shell visible even if host tooling injects opacity/visibility.
 * Do NOT force children; [hidden] panels must stay display:none. */
/* Geometry when outside float-layer (legacy / wave host). Inside
 * #w-storefront-float-layer Theme CSS forces relative + shared bottom inset. */
.w-store-music {
  position: fixed;
  left: max(0.85rem, env(safe-area-inset-left));
  bottom: max(0.95rem, env(safe-area-inset-bottom, 0px));
  z-index: var(--w-store-music-z-widget);
  font-family: var(--font-body, var(--weline-theme-font-body, system-ui, sans-serif));
  color: var(--w-store-music-ink);
}

.w-store-music__shell,
.w-store-music__entry,
.w-store-music__avatar {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}.w-store-music__panel[hidden]{
  display: none;
}

.w-store-music__shell {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: var(--spacing-0_65);
}

.w-store-music__entry {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--spacing-0_45);
}

.w-store-music__avatar {
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
  flex: 0 0 auto;
  /* Match CustomerService .cs-chat-button (3.75rem) — all layouts, not only homepage. */
  width: 3.75rem;
  height: 3.75rem;
  aspect-ratio: 1;
  border-radius: 50%;
  /* Spectrum spokes paint outside the disc; face is absolutely inset so it cannot stretch the box. */
  overflow: visible;
  box-shadow: var(--w-store-music-shadow);
  --w-store-music-level: 0;
  /* Half of avatar box; JS overwrites with measured px for pixel-perfect concentricity. */
  --w-spectrum-r: 1.875rem;
}

/* Polar spectrum: same box as avatar; bars pivot on avatar CENTER (not top:50%+bottom origin). */
.w-store-music__spectrum {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
  opacity: 0;
  visibility: hidden;
  filter: none;
}

.w-store-music.is-playing .w-store-music__spectrum,
.w-store-music.is-remote-playing .w-store-music__spectrum {
  opacity: 1;
  visibility: visible;
  /* Soften ultra-dense spokes into a continuous water rim. */
  filter: blur(0.45px);
}

.w-store-music__spectrum-bar {
  /* Compact polar water rim around avatar (NOT the body-bottom full-page wave columns).
   * Hairline width + high bar count → continuous liquid sheet. */
  --w-spectrum-len: calc(0.32rem + (var(--w-bar, 0) * 1.15rem));
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: 0.09rem;
  /* Full spoke from center; inner segment transparent so only the outer ring paints. */
  height: calc(var(--w-spectrum-r) + var(--w-spectrum-len));
  margin-left: -0.045rem;
  border-radius: var(--radius-full);
  transform-origin: center bottom;
  transform: rotate(var(--w-ang, 0deg));
  background: linear-gradient(
    to top,
    transparent 0,
    transparent var(--w-spectrum-r),
    color-mix(
      in srgb,
      var(--w-store-music-accent) calc(58% + (var(--w-bar, 0) * 34%)),
      transparent
    ) var(--w-spectrum-r),
    color-mix(
      in srgb,
      var(--w-store-music-accent) calc(42% + (var(--w-bar, 0) * 46%)),
      transparent
    ) 100%
  );
  box-shadow: none;
  opacity: 0;
  will-change: height, opacity;
}

.w-store-music.is-playing .w-store-music__spectrum-bar,
.w-store-music.is-remote-playing .w-store-music__spectrum-bar {
  opacity: calc(0.55 + (var(--w-bar, 0) * 0.4));
}

.w-store-music:not(.is-playing):not(.is-remote-playing) .w-store-music__spectrum-bar {
  --w-bar: 0;
  opacity: 0;
}

/*
 * html/body overflow-x:clip clips spokes that poke past the left/bottom viewport edge.
 * Nudge the float-start host inward when this widget is present so the ring stays on-screen.
 */
#w-storefront-float-layer .w-storefront-float-layer__slot--start:has(.w-store-music) {
  /* Inset for shorter polar spokes at 3.75rem FAB (was 2.85/2.5 at 5.5rem). */
  left: max(1.75rem, env(safe-area-inset-left, 0px));
  bottom: max(1.65rem, env(safe-area-inset-bottom, 0px));
}

/* Theme edge-dock collapsed: flush to viewport edge (do not keep 1.75rem inset). */
#w-storefront-float-layer
  .w-storefront-float-layer__slot--start.is-edge-collapsed:has(.w-store-music) {
  left: max(0px, env(safe-area-inset-left, 0px));
}.w-store-music__face.w-store-music__face{
  /* Fill avatar box only — never keep a separate rem size (homepage may shrink avatar). */
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  box-sizing: border-box;
  width: 100%;
  /* Override global img height: auto so HTML ratio cannot oval-stretch the disc. */
  height: 100%;
  max-width: none;
  max-height: none;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 18%;
  border: var(--border-width-2) solid color-mix(in srgb, var(--w-store-music-surface) 88%, var(--w-store-music-accent));
  background: color-mix(in srgb, var(--w-store-music-surface) 90%, var(--w-store-music-accent) 10%);
  transform: none;
  transform-origin: center center;
}

/* Optional vinyl spin — only when admin enables avatar_spin. */
.w-store-music.is-playing.is-avatar-spin .w-store-music__face {
  animation: w-store-music-spin 14s linear infinite;
}

.w-store-music:not(.is-playing) .w-store-music__face,
.w-store-music:not(.is-avatar-spin) .w-store-music__face {
  animation: none;
  transform: none;
}

.w-store-music__avatar:focus-visible {
  outline: var(--border-width-medium) solid var(--w-store-music-accent);
  outline-offset: 3px;
}

.w-store-music__avatar.is-need-gesture {
  animation: w-store-music-pulse 1.6s ease-in-out infinite;
}

/* Ripple already signals presence — avoid scaling the shell while idle rings run. */
.w-store-music:not(.is-playing) .w-store-music__avatar.is-need-gesture {
  animation: w-store-music-pulse 1.6s ease-in-out infinite;
}

.w-store-music.is-playing .w-store-music__avatar.is-need-gesture {
  animation: none;
}

.w-store-music__hint {
  appearance: none;
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  white-space: nowrap;
  background: var(--w-store-music-surface);
  color: var(--w-store-music-ink);
  border: var(--border-width-thin) solid color-mix(in srgb, var(--w-store-music-accent) 20%, transparent);
  border-radius: var(--radius-full);
  padding: var(--spacing-0_2) var(--spacing-0_55);
  font-size: var(--font-size-xs);
  line-height: 1.2;
  box-shadow: var(--weline-shadow-lg);
  cursor: pointer;
  pointer-events: auto;
  z-index: 1;
}

.w-store-music__hint:focus-visible {
  outline: var(--border-width-medium) solid var(--w-store-music-accent);
  outline-offset: 2px;
}.w-store-music.is-open .w-store-music__hint.w-store-music__hint, .w-store-music.is-playing .w-store-music__hint.w-store-music__hint{
  display: none;
}

.w-store-music__panel {
  width: min(17.5rem, calc(100vw - 6.5rem));
  padding: var(--weline-space-3) var(--spacing-0_8) var(--spacing-0_7);
  border-radius: var(--sidebar-radius);
  background: color-mix(in srgb, var(--w-store-music-surface) 94%, var(--w-store-music-accent) 6%);
  border: var(--border-width-thin) solid color-mix(in srgb, var(--w-store-music-accent) 16%, transparent);
  box-shadow: var(--w-store-music-shadow);
  display: grid;
  gap: var(--spacing-0_55);
  line-height: 1.3;
}/* Open panel must stay fully visible (some tooling leaves opacity:0.001 on ex-[hidden]). */
.w-store-music.is-open .w-store-music__panel:not([hidden]){
  opacity: 1;
  pointer-events: auto;
}

.w-store-music__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-0_4);
}

.w-store-music__meta {
  min-width: 0;
  display: grid;
  gap: var(--spacing-0_2);
}

.w-store-music__title {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--w-store-music-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.w-store-music__intro-wrap {
  display: grid;
  gap: var(--spacing-0_2);
  min-width: 0;
}

.w-store-music__intro {
  font-size: var(--font-size-xs);
  line-height: 1.45;
  color: var(--w-store-music-muted);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.w-store-music__intro-wrap.is-expanded .w-store-music__intro {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

.w-store-music__intro-toggle {
  appearance: none;
  border: 0;
  padding: var(--spacing-px) 0;
  margin: 0;
  align-self: start;
  justify-self: start;
  background: transparent;
  color: var(--w-store-music-accent);
  font: inherit;
  font-size: var(--font-size-xs);
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.w-store-music__intro-toggle:focus-visible {
  outline: var(--border-width-medium) solid color-mix(in srgb, var(--w-store-music-accent) 55%, transparent);
  outline-offset: 2px;
  border-radius: var(--border-radius-sm);
}

.w-store-music__dismiss {
  appearance: none;
  border: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--w-store-music-ink) 8%, transparent);
  color: var(--w-store-music-ink);
  cursor: pointer;
  line-height: 1;
  font-size: var(--weline-font-size-base);
}

.w-store-music__transport {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-0_65);
}

.w-store-music__btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--w-store-music-ink) 8%, transparent);
  color: var(--w-store-music-ink);
  width: 2rem;
  height: 2rem;
  font-size: var(--font-size-sm);
}

.w-store-music__btn--play,
.w-store-music__btn--pause {
  width: 2.55rem;
  height: 2.55rem;
  color: var(--w-store-music-surface);
  background: var(--w-store-music-accent);
}

.w-store-music__btn:focus-visible,
.w-store-music__dismiss:focus-visible,
.w-store-music__avatar:focus-visible {
  outline: var(--border-width-medium) solid var(--w-store-music-accent);
  outline-offset: 2px;
}

.w-store-music__vol {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--spacing-0_4);
}

.w-store-music__vol-pct {
  font-size: var(--font-size-xs);
  color: var(--w-store-music-muted);
  min-width: 2.2rem;
  text-align: end;
}

.w-store-music__vol input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 0.2rem;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--w-store-music-accent) 35%, var(--w-store-music-ink) 12%);
  outline: none;
  cursor: pointer;
}

.w-store-music__vol input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: var(--radius-full);
  background: var(--w-store-music-accent);
  border: var(--border-width-medium) solid var(--w-store-music-surface);
}

.w-store-music__vol input[type="range"]::-moz-range-thumb {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: var(--radius-full);
  background: var(--w-store-music-accent);
  border: var(--border-width-medium) solid var(--w-store-music-surface);
}

.w-store-music__compartment {
  display: grid;
  gap: var(--spacing-1_5);
}

.w-store-music__compartment-head {
  display: flex;
  align-items: center;
  gap: var(--spacing-1_5);
}

.w-store-music__compartment-label {
  font-size: var(--font-size-xs);
  letter-spacing: var(--spacing-px);
  color: var(--w-store-music-muted);
}

.w-store-music__compartment-count {
  margin-right: auto;
  font-size: var(--font-size-xs);
  color: var(--w-store-music-muted);
}

.w-store-music__search {
  display: block;
  margin: 0;
}

.w-store-music__search-input {
  appearance: none;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: var(--spacing-0_4) var(--spacing-0_65);
  border: 0;
  border-radius: var(--border-radius-lg);
  background: var(--w-store-music-surface);
  color: var(--w-store-music-ink);
  font: inherit;
  font-size: var(--font-size-xs);
  line-height: 1.3;
  box-shadow: var(--weline-shadow-lg);
  outline: none;
}

.w-store-music__search-input::placeholder {
  color: var(--w-store-music-muted);
}

.w-store-music__search-input:focus-visible {
  box-shadow: var(--weline-shadow-md);
}

.w-store-music__search-empty {
  margin: 0;
  padding: var(--spacing-0_55) var(--spacing-1_5);
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--w-store-music-muted);
}.w-store-music__search-empty[hidden]{
  display: none;
}

.w-store-music__playlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--spacing-xs);
  max-block-size: 9rem;
  overflow: auto;
}

.w-store-music__track {
  appearance: none;
  border: 0;
  width: 100%;
  text-align: start;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--spacing-0_5) var(--spacing-0_4);
  padding: var(--spacing-0_45) var(--weline-space-2);
  border-radius: var(--border-radius-lg);
  background: var(--w-store-music-surface);
  color: var(--w-store-music-ink);
  cursor: pointer;
  box-shadow: var(--weline-shadow-lg);
}

.w-store-music__track.is-active {
  box-shadow: var(--weline-shadow-md);
}

.w-store-music__track.is-active .w-store-music__track-title {
  color: var(--w-store-music-accent);
}

.w-store-music__track-title {
  font-size: var(--font-size-xs);
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.w-store-music__track-intro {
  grid-column: 1 / -1;
  font-size: var(--font-size-xs);
  line-height: 1.4;
  color: var(--w-store-music-muted);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.w-store-music__track.is-intro-expanded .w-store-music__track-intro {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
  white-space: normal;
}

.w-store-music__track-intro-toggle {
  grid-column: 1 / -1;
  appearance: none;
  border: 0;
  padding: var(--spacing-px) 0 0;
  margin: 0;
  justify-self: start;
  background: transparent;
  color: var(--w-store-music-accent);
  font: inherit;
  font-size: var(--font-size-xs);
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.1em;
}

.w-store-music__track-mark {
  font-size: var(--font-size-xs);
  color: var(--w-store-music-muted);
}

.w-store-music__track.is-active .w-store-music__track-mark {
  color: var(--w-store-music-surface);
  background: var(--w-store-music-accent);
  border-radius: var(--radius-full);
  min-width: 1.1rem;
  height: 1.1rem;
  display: inline-grid;
  place-items: center;
}

.w-store-music__wave {
  position: relative;
  width: 1.4rem;
  height: 1.4rem;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.w-store-music__wave input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.w-store-music__wave-face {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-full);
  display: grid;
  place-items: center;
  border: var(--border-width-thin) solid color-mix(in srgb, var(--w-store-music-ink) 14%, transparent);
  font-size: var(--font-size-xs);
  color: var(--w-store-music-muted);
}

.w-store-music__wave:has(input:checked) .w-store-music__wave-face {
  color: var(--w-store-music-accent);
  border-color: color-mix(in srgb, var(--w-store-music-accent) 45%, transparent);
}

.w-store-music__status {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--w-store-music-muted);
}/* Panel open = user is choosing here; never let cross-tab nag compete with the playlist. */
.w-store-music.is-open .w-store-music__status.w-store-music__status{
  display: none;
}

.w-store-music__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes w-store-music-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

@keyframes w-store-music-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {.w-store-music__avatar.is-need-gesture.is-need-gesture, .w-store-music.is-playing.is-avatar-spin .w-store-music__face.w-store-music__face{
    animation: none;
  }

  .w-store-music.is-playing.is-avatar-spin .w-store-music__face {
    transform: none;
  }.w-store-music__spectrum.w-store-music__spectrum{
    display: none;
  }
}

/* Mobile shrink: keep FAB below reading-column dominance (align CS 2.5rem). */
@media (max-width: 720px) {
  .w-store-music__avatar {
    width: 2.5rem;
    height: 2.5rem;
    --w-spectrum-r: 1.25rem;
  }

  .w-store-music__spectrum-bar {
    --w-spectrum-len: calc(0.22rem + (var(--w-bar, 0) * 0.75rem));
  }

  .w-store-music__panel {
    width: min(15.5rem, calc(100vw - 6.2rem));
  }
}

/**
 * 客服服务前端浮层 — Classic chrome 对齐（--weline-chrome-*）+ Weline 控件契约
 */
@layer page {
    .customer-service-widget,
    .customer-service-widget--classic {
        --cs-accent: var(--weline-chrome-primary);
        --cs-accent-hover: var(--weline-chrome-primary-dark);
        --cs-on-accent: var(--color-bg-dark-secondary);
        --cs-header-bg: var(--weline-chrome-bg-dark);
        --cs-header-text: var(--weline-chrome-text-light);
        --cs-header-text-muted: var(--weline-chrome-text-light-secondary);
        --cs-surface: var(--weline-chrome-bg-primary);
        --cs-surface-muted: var(--weline-chrome-bg-secondary);
        --cs-canvas: var(--weline-chrome-body-bg);
        --cs-text: var(--weline-chrome-body-text);
        --cs-text-muted: var(--weline-chrome-body-text-secondary);
        --cs-text-subtle: var(--weline-chrome-text-muted);
        --cs-border: var(--weline-chrome-border-default);
        --cs-border-strong: var(--color-border-emphasis);
        --cs-focus: var(--weline-chrome-border-focus, var(--cs-accent));
        --cs-success: var(--color-success);
        --cs-info: var(--color-info);
        --cs-radius-window: 8px;
        --cs-radius-control: 4px;
        --cs-shadow: 0 4px 16px var(--color-overlay-medium);
        --cs-shadow-lg: 0 8px 28px var(--color-overlay-dark);
    }

    .cs-icon {
        display: inline-block;
        vertical-align: middle;
        flex-shrink: 0;
    }

    /* Outside float-layer (legacy). Inside #w-storefront-float-layer Theme CSS
     * forces relative; sticky clearance is owned by the layer padding. */
    .customer-service-widget {
        position: fixed;
        bottom: calc(
            var(--weline-space-5)
            + var(--weline-safe-area-bottom)
        );
        right: calc(var(--weline-space-5) + var(--weline-safe-area-right));
        z-index: var(--weline-z-overlay);
        font-family: var(--weline-font-sans);
        color: var(--cs-text);
        /* Slot-anchored chat panel must paint outside the FAB box. */
        overflow: visible;
        transition: opacity var(--weline-motion-normal) ease, visibility var(--weline-motion-normal) ease, transform var(--weline-motion-normal) ease, bottom var(--weline-motion-normal) ease;
    }

    /* Legacy viewport-fixed path. Inside float-layer, Theme end-slot CSS lifts instead. */
    body:has(.weline-social-quick-bar:not([hidden])) .customer-service-widget:not(.is-open) {
        bottom: calc(
            var(--weline-space-5)
            + var(--weline-safe-area-bottom)
            + 10.5rem
        );
    }

    /* 未读或会话打开时盖过社交登录条（其 z-index 为 2147483000） */
    .customer-service-widget.has-unread,
    .customer-service-widget:has(.cs-chat-button.has-unread),
    .customer-service-widget.is-open {
        z-index: 2147483001;
    }

    .customer-service-widget.customer-service-widget--mini-cart-open {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(var(--weline-space-2));
    }

    /* 有未读时即使迷你购物车打开也保持可见提示 */
    .customer-service-widget.customer-service-widget--mini-cart-open.has-unread {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
    }

    .cs-chat-button {
        width: 3.75rem;
        height: 3.75rem;
        background: var(--cs-header-bg);
        border: var(--border-width-thin) solid color-mix(in srgb, var(--cs-header-text) 12%, transparent);
        border-radius: var(--weline-radius-round);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        /* 勿把 transform 放进 transition，否则会冲掉 has-unread 呼吸动画 */
        transition: box-shadow var(--weline-motion-normal) ease, background-color var(--weline-motion-fast) ease;
        position: relative;
        color: var(--cs-header-text);
        transform-origin: center center;
        will-change: transform;
    }

    .cs-chat-button .cs-icon {
        width: 1.75rem;
        height: 1.75rem;
    }

    .cs-chat-button:hover {
        transform: scale(1.06);
        background: var(--weline-chrome-bg-dark-secondary);
        box-shadow: var(--cs-shadow-lg);
    }

    /* 有未读消息：明确呼吸 + 光晕，必须看得见「有动作」 */
    .cs-chat-button.has-unread {
        animation: cs-chat-button-breathe 1.15s ease-in-out infinite;
        transition: box-shadow var(--weline-motion-normal) ease, background-color var(--weline-motion-fast) ease;
    }

    .cs-chat-button.has-unread:hover {
        animation-play-state: running;
    }

    @keyframes cs-chat-button-breathe {
        0%,
        100% {
            transform: scale(1);
            box-shadow: var(--cs-shadow), 0 0 0 0 color-mix(in srgb, var(--weline-theme-danger) 45%, transparent);
        }
        50% {
            transform: scale(1.18);
            box-shadow: var(--weline-shadow-lg);
        }
    }

    .cs-presence-dot {
        position: absolute;
        top: 0.15rem;
        inset-inline-end: 0.15rem;
        width: 0.7rem;
        height: 0.7rem;
        border-radius: var(--weline-radius-round);
        background: var(--cs-success);
        border: var(--border-width-medium) solid var(--cs-header-bg);
        box-shadow: var(--focus-ring);
        pointer-events: none;
        z-index: 2;
    }.cs-presence-dot[hidden]{
        display: none;
    }

    .cs-badge {
        position: absolute;
        top: -0.3rem;
        right: -0.3rem;
        background: var(--weline-theme-danger);
        color: var(--weline-theme-on-danger);
        border-radius: var(--weline-radius-round);
        min-width: 1.25rem;
        height: 1.25rem;
        padding-inline: var(--spacing-0_2);
        display: none;
        align-items: center;
        justify-content: center;
        font-size: var(--weline-font-size-xs);
        font-weight: 700;
        line-height: 1;
        z-index: 3;
    }.cs-badge.is-visible.is-visible{
        display: flex;
    }

    @media (prefers-reduced-motion: reduce) {
        .cs-chat-button.has-unread {
            animation: cs-chat-button-breathe-reduced 1.6s ease-in-out infinite;
        }
        @keyframes cs-chat-button-breathe-reduced {
            0%,
            100% {
                box-shadow: var(--cs-shadow), 0 0 0 0 color-mix(in srgb, var(--weline-theme-danger) 50%, transparent);
            }
            50% {
                box-shadow: var(--weline-shadow-lg);
            }
        }
    }

    .cs-status-label {
        display: inline-flex;
        align-items: center;
        max-width: 100%;
        font-size: var(--weline-font-size-xs);
        padding: var(--spacing-0_5) var(--weline-space-2);
        border-radius: var(--cs-radius-control);
        margin: 0;
        font-weight: 550;
        line-height: 1.35;
        background-color: color-mix(in srgb, var(--cs-text-subtle) 18%, transparent);
        color: var(--cs-text-subtle);
        transition: background-color var(--weline-motion-normal) ease, color var(--weline-motion-normal) ease;
        white-space: nowrap;
    }

    .cs-status-label.cs-status-online {
        background-color: color-mix(in srgb, var(--cs-success) 18%, transparent);
        color: var(--cs-success);
    }

    .cs-status-label.cs-status-ai {
        background-color: color-mix(in srgb, var(--cs-info) 18%, transparent);
        color: var(--cs-info);
    }

    .cs-status-label.cs-status-offline {
        background-color: color-mix(in srgb, var(--cs-text-subtle) 18%, transparent);
        color: var(--cs-text-subtle);
    }

    .cs-chat-window {
        position: absolute;
        bottom: 5rem;
        right: 0;
        left: auto;
        width: min(23.75rem, calc(100vw - 2.5rem));
        height: min(37.5rem, calc(100dvh - 6.5rem));
        max-width: calc(100vw - 2.5rem);
        max-height: min(80vh, calc(100dvh - 6.5rem));
        background: var(--cs-surface);
        color: var(--cs-text);
        border: var(--border-width-thin) solid var(--cs-border);
        border-radius: var(--cs-radius-window);
        box-shadow: var(--cs-shadow-lg);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .cs-chat-header {
        background: var(--cs-header-bg);
        color: var(--cs-header-text);
        padding: var(--weline-space-3) var(--weline-space-4);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--weline-space-3);
    }

    .cs-chat-title {
        display: flex;
        align-items: flex-start;
        gap: var(--weline-space-3);
        font-weight: 650;
        font-size: var(--weline-font-size-md);
        min-width: 0;
        flex: 1;
    }

    .cs-chat-title > .cs-icon {
        margin-top: var(--spacing-0_5);
    }

    .cs-chat-title-copy {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--weline-space-1);
        min-width: 0;
    }

    #cs-title-text {
        display: block;
        line-height: 1.3;
        overflow-wrap: anywhere;
    }

    .cs-chat-header .cs-status-label {
        background-color: color-mix(in srgb, var(--cs-header-text) 14%, transparent);
        color: var(--cs-header-text-muted);
    }

    .cs-chat-header .cs-status-label.cs-status-online {
        background-color: color-mix(in srgb, var(--cs-success) 24%, transparent);
        color: var(--color-success-bg-subtle);
    }

    .cs-chat-header .cs-status-label.cs-status-ai {
        background-color: color-mix(in srgb, var(--cs-info) 24%, transparent);
        color: var(--color-info-bg-subtle);
    }

    .cs-chat-header .cs-status-label.cs-status-offline {
        background-color: color-mix(in srgb, var(--cs-header-text) 12%, transparent);
        color: var(--cs-header-text-muted);
    }

    .cs-chat-actions {
        display: flex;
        gap: var(--weline-space-2);
        flex-shrink: 0;
        align-self: flex-start;
    }

    .cs-chat-header .cs-btn-icon,
    .cs-chat-header .w-button.cs-btn-icon {
        background: color-mix(in srgb, var(--cs-header-text) 12%, transparent);
        border-color: transparent;
        color: var(--cs-header-text);
        width: 2rem;
        height: 2rem;
        min-height: var(--control-height-sm);
        min-inline-size: 2rem;
        inline-size: 2rem;
        padding: 0;
        border-radius: var(--cs-radius-control);
    }

    .cs-chat-header .cs-btn-icon:hover,
    .cs-chat-header .w-button.cs-btn-icon:hover {
        background: color-mix(in srgb, var(--cs-header-text) 20%, transparent);
        color: var(--cs-header-text);
    }

    .cs-btn-icon {
        background: color-mix(in srgb, var(--cs-header-text) 12%, transparent);
        border: var(--border-width-thin) solid transparent;
        color: var(--cs-header-text);
        width: 2rem;
        height: 2rem;
        min-height: var(--control-height-sm);
        border-radius: var(--cs-radius-control);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        transition: background-color var(--weline-motion-fast) ease;
    }

    .cs-btn-icon:hover {
        background: color-mix(in srgb, var(--cs-header-text) 20%, transparent);
    }

    .cs-settings-panel {
        background: var(--cs-surface-muted);
        border-bottom: var(--border-width-thin) solid var(--cs-border);
        padding: var(--weline-space-3) var(--weline-space-4);
    }

    .cs-settings-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--weline-space-3);
        margin-bottom: var(--weline-space-3);
    }

    .cs-settings-item:last-child {
        margin-bottom: 0;
    }

    .cs-settings-item label {
        display: flex;
        align-items: center;
        gap: var(--weline-space-2);
        font-size: var(--weline-font-size-sm);
        color: var(--cs-text-muted);
        font-weight: 550;
    }

    .cs-settings-item .w-select,
    .cs-settings-item select {
        min-width: 7.5rem;
        width: auto;
        max-width: 55%;
        min-height: var(--weline-control-height-sm);
        padding-block: var(--weline-space-1);
        font-size: var(--weline-font-size-sm);
        background: var(--cs-surface);
        color: var(--cs-text);
        border: var(--border-width-thin) solid var(--cs-border-strong);
        border-radius: var(--cs-radius-control);
    }

    .cs-chat-body {
        flex: 1;
        overflow-y: auto;
        padding: var(--weline-space-5);
        background: var(--cs-canvas);
    }

    .cs-welcome-message {
        text-align: center;
        color: var(--cs-text-muted);
        padding: var(--weline-space-5);
    }

    .cs-welcome-message p {
        margin-block: 0 var(--weline-space-2);
    }

    .cs-welcome-message p:last-child {
        margin-block-end: 0;
    }

    .cs-chat-title-copy {
        display: flex;
        flex-direction: column;
        gap: var(--weline-space-1);
        min-width: 0;
    }

    .cs-identity-chip {
        display: inline-flex;
        align-items: center;
        gap: var(--weline-space-2);
        max-width: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--cs-text-muted);
        font: inherit;
        font-size: var(--weline-font-size-xs);
        line-height: 1.2;
        text-align: left;
        cursor: default;
    }

    .cs-identity-chip.is-editable {
        cursor: pointer;
        text-decoration: underline;
        text-underline-offset: 2px;
        color: var(--cs-text);
    }

    .cs-identity-avatar {
        width: 1.125rem;
        height: 1.125rem;
        border-radius: var(--radius-full);
        object-fit: cover;
        flex: 0 0 auto;
    }

    .cs-identity-label {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .cs-day-separator {
        align-self: center;
        margin: var(--weline-space-3) 0;
        padding: var(--weline-space-1) var(--weline-space-3);
        border-radius: var(--radius-full);
        background: var(--cs-surface-muted);
        color: var(--cs-text-muted);
        font-size: var(--weline-font-size-xs);
    }

    .cs-message.system {
        align-items: center;
    }

    .cs-message.system .cs-message-bubble {
        max-width: 90%;
        background: transparent;
        color: var(--cs-text-muted);
        border: var(--border-width-thin) dashed var(--weline-theme-border);
        text-align: center;
        font-size: var(--font-size-13);
    }

    .cs-message-meta {
        display: inline-flex;
        align-items: center;
        gap: var(--weline-space-2);
        margin-bottom: var(--weline-space-1);
        max-width: 75%;
    }

    .cs-message.customer .cs-message-meta {
        flex-direction: row-reverse;
    }

    .cs-message-avatar {
        width: 1.25rem;
        height: 1.25rem;
        border-radius: var(--radius-full);
        object-fit: cover;
    }

    .cs-message-sender {
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--cs-text-muted);
        font: inherit;
        font-size: var(--weline-font-size-xs);
        cursor: default;
    }

    button.cs-message-sender {
        cursor: pointer;
        text-decoration: underline;
        text-underline-offset: 2px;
        color: var(--cs-text);
    }

    .cs-message {
        margin-bottom: var(--weline-space-4);
        display: flex;
        flex-direction: column;
    }

    .cs-message.customer {
        align-items: flex-end;
    }

    .cs-message.agent {
        align-items: flex-start;
    }

    .cs-message-bubble {
        max-width: 75%;
        padding: var(--weline-space-3) var(--weline-space-4);
        border-radius: var(--cs-radius-window);
        word-wrap: break-word;
        position: relative;
    }

    .cs-message.customer .cs-message-bubble {
        background: var(--cs-surface-muted);
        color: var(--cs-text);
        border: var(--border-width-thin) solid var(--cs-border);
        border-bottom-right-radius: var(--cs-radius-control);
    }

    .cs-message.agent .cs-message-bubble {
        background: var(--cs-surface);
        color: var(--cs-text);
        border: var(--border-width-thin) solid var(--cs-border);
        border-bottom-left-radius: var(--cs-radius-control);
    }

    .cs-message-image {
        display: block;
        max-width: 100%;
        height: auto;
        border-radius: var(--cs-radius-control);
        background: var(--cs-surface-muted);
    }

    .cs-message-image.is-broken {
        min-width: 8rem;
        min-height: 5rem;
        border: var(--border-width-thin) dashed var(--cs-border);
    }

    .cs-message-time {
        font-size: var(--weline-font-size-xs);
        color: var(--cs-text-subtle);
        margin-top: var(--weline-space-1);
        padding: 0 var(--weline-space-1);
    }

    .cs-message-original {
        font-size: var(--weline-font-size-sm);
        opacity: 0.9;
        margin-bottom: var(--weline-space-2);
        padding-bottom: var(--weline-space-2);
        border-bottom: var(--border-width-thin) dashed color-mix(in srgb, var(--weline-theme-border-strong) 70%, transparent);
    }

    .cs-message-translated {
        font-size: var(--weline-font-size-md);
    }

    .cs-message-label {
        font-size: var(--font-size-xs);
        text-transform: uppercase;
        opacity: 0.65;
        margin-bottom: var(--spacing-0_5);
        display: block;
    }

    .cs-message.customer .cs-message-original {
        border-bottom-color: color-mix(in srgb, var(--cs-border-strong) 70%, transparent);
    }

    .cs-lang-tag {
        display: inline-block;
        font-size: var(--font-size-xs);
        padding: var(--spacing-0_5) var(--spacing-1_5);
        border-radius: var(--cs-radius-control);
        margin-left: var(--weline-space-2);
        background: color-mix(in srgb, var(--cs-text) 8%, transparent);
    }

    .cs-message.customer .cs-lang-tag {
        background: color-mix(in srgb, var(--cs-text) 10%, transparent);
    }

    .cs-chat-footer {
        border-top: var(--border-width-thin) solid var(--cs-border);
        padding: var(--weline-space-4);
        background: var(--cs-surface);
    }

    .cs-language-selector {
        margin-bottom: var(--weline-space-3);
    }

    .cs-language-selector .w-select,
    .cs-language-selector select {
        width: 100%;
        background: var(--cs-surface);
        color: var(--cs-text);
        border: var(--border-width-thin) solid var(--cs-border-strong);
        border-radius: var(--cs-radius-control);
    }

    .cs-input-area {
        display: flex;
        gap: var(--weline-space-3);
        align-items: flex-end;
    }

    .cs-composer-toolbar {
        display: flex;
        flex-wrap: wrap;
        gap: var(--weline-space-2);
        margin-bottom: var(--weline-space-2);
    }

    .cs-composer-panel {
        margin-bottom: var(--weline-space-2);
        padding: var(--weline-space-2);
        border: var(--border-width-thin) solid var(--cs-border);
        border-radius: var(--cs-radius-control, var(--weline-radius-md));
        background: var(--cs-surface-muted);
        max-height: 8rem;
        overflow: auto;
    }.cs-composer-panel[hidden]{
        display: none;
    }

    /* WeChat-style: select on live page first */
    body.cs-shot-crop-open {
        overflow: hidden;
    }

    .cs-shot-crop {
        position: fixed;
        inset: 0;
        z-index: 10060;
        display: flex;
        flex-direction: column;
        background: transparent;
        color: var(--weline-theme-color-on-inverse);
    }

    .cs-shot-crop--live .cs-shot-crop__stage {
        background: var(--color-bg-dark);
    }

    .cs-shot-crop__stage {
        position: relative;
        flex: 1 1 auto;
        min-height: 0;
        cursor: crosshair;
        touch-action: none;
        user-select: none;
    }

    .cs-shot-crop__rect {
        position: absolute;
        box-sizing: border-box;
        border: var(--border-width-thin) solid var(--color-border-soft);
        box-shadow: var(--weline-shadow-md);
        pointer-events: none;
    }

    .cs-shot-crop__hint {
        margin: 0;
        padding: var(--weline-theme-space-2) var(--weline-theme-space-4);
        text-align: center;
        font-size: var(--weline-theme-font-size-sm);
        color: var(--color-on-dark-92);
        background: var(--color-bg-dark);
    }

    .cs-shot-crop__bar {
        display: flex;
        justify-content: center;
        gap: var(--weline-theme-space-3);
        padding: var(--weline-theme-space-3) var(--weline-theme-space-4)
            calc(var(--weline-theme-space-4) + env(safe-area-inset-bottom, 0px));
        background: var(--color-bg-dark);
        transition: background 0.2s ease, box-shadow 0.2s ease;
    }

    .cs-shot-crop__bar .w-button,
    .cs-shot-crop__btn {
        min-width: 4.5rem;
        opacity: 0.55;
        transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    }

    .cs-shot-crop__confirm:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

    .cs-shot-crop--ready .cs-shot-crop__bar {
        background: var(--color-bg-dark);
        box-shadow: var(--weline-shadow-md);
    }

    .cs-shot-crop--ready .cs-shot-crop__btn {
        opacity: 1;
    }

    .cs-shot-crop--ready [data-cs-shot-cancel],
    .cs-shot-crop--ready [data-cs-shot-reset] {
        color: var(--color-text-light);
        border: var(--border-width-thin) solid var(--color-on-dark-55);
        background: var(--color-on-dark-15);
    }

    .cs-shot-crop--ready .cs-shot-crop__confirm:not(:disabled),
    .cs-shot-crop--ready [data-cs-shot-confirm]:not(:disabled) {
        opacity: 1;
        transform: scale(1.06);
        color: var(--color-text-light);
        background: var(--weline-theme-color-brand, var(--w-color-brand));
        border: var(--border-width-thin) solid var(--color-on-dark-92);
        box-shadow: var(--weline-shadow-lg);
        animation: cs-shot-confirm-pulse 1.4s ease-in-out infinite;
    }

    .cs-shot-crop--busy .cs-shot-crop__stage {
        cursor: wait;
    }

    .cs-shot-crop--busy .cs-shot-crop__confirm,
    .cs-shot-crop--busy [data-cs-shot-confirm] {
        animation: none;
        transform: none;
        opacity: 1;
    }

    @keyframes cs-shot-confirm-pulse {
        0%, 100% { box-shadow: var(--weline-shadow-lg); }
        50% { box-shadow: var(--weline-shadow-lg); }
    }

    .cs-emoji-item {
        border: 0;
        background: transparent;
        font-size: var(--weline-font-size-xl);
        line-height: 1.4;
        cursor: pointer;
        padding: var(--spacing-0_5);
    }

    .cs-guest-send-gate {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--weline-space-2) var(--weline-space-3);
        margin: 0 0 var(--weline-space-2);
        padding: var(--weline-space-2) var(--weline-space-3);
        border: var(--border-width-thin) solid var(--cs-border);
        border-radius: var(--cs-radius-control);
        background: var(--cs-surface-muted);
        color: var(--cs-text-muted);
    }.cs-guest-send-gate[hidden]{
        display: none;
    }

    .cs-guest-send-gate__text {
        flex: 1 1 12rem;
        margin: 0;
        font-size: var(--weline-font-size-sm);
        line-height: var(--weline-line-height);
        color: var(--cs-text);
    }

    .cs-guest-send-gate__action {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    /* 显式 background/color：避免 color-scheme:dark 下原生控件黑底白字 */
    .cs-message-input,
    .cs-chat-footer .w-textarea,
    textarea.cs-message-input {
        flex: 1;
        width: auto;
        min-height: var(--control-height-lg);
        max-height: 7.5rem;
        height: auto;
        padding: var(--weline-space-2) var(--weline-space-3);
        border: var(--border-width-thin) solid var(--cs-border-strong);
        border-radius: var(--cs-radius-control);
        font-size: var(--weline-font-size-sm);
        line-height: var(--weline-line-height);
        resize: none;
        font-family: inherit;
        background: var(--cs-surface);
        color: var(--cs-text);
        color-scheme: inherit;
        box-shadow: none;
    }

    .cs-message-input::placeholder,
    .cs-chat-footer .w-textarea::placeholder {
        color: var(--cs-text-subtle);
    }

    .cs-message-input:hover,
    .cs-chat-footer .w-textarea:hover {
        border-color: var(--cs-border-strong);
    }

    .cs-message-input:focus,
    .cs-chat-footer .w-textarea:focus {
        outline: 0;
        border-color: var(--cs-focus);
        box-shadow: var(--focus-ring);
    }

    .cs-message-input:disabled,
    .cs-chat-footer .w-textarea:disabled {
        background: var(--cs-surface-muted);
        color: var(--cs-text-muted);
        cursor: not-allowed;
    }

    .cs-send-button {
        width: 2.5rem;
        height: 2.5rem;
        min-width: 2.5rem;
        min-height: var(--control-height-md);
        padding: 0;
        background: var(--cs-accent);
        color: var(--cs-on-accent);
        border: var(--border-width-thin) solid var(--cs-accent);
        border-radius: var(--cs-radius-control);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: background-color var(--weline-motion-fast) ease, border-color var(--weline-motion-fast) ease;
        flex-shrink: 0;
    }

    .cs-send-button:hover:not(:disabled) {
        background: var(--cs-accent-hover);
        border-color: var(--cs-accent-hover);
    }

    .cs-send-button:disabled {
        opacity: 0.55;
        cursor: not-allowed;
    }

    .cs-modal {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        background: var(--weline-theme-overlay);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: calc(var(--weline-z-overlay) + 350);
        padding: var(--weline-space-4);
        pointer-events: auto;
    }

    #cs-bind-modal.cs-modal,
    #cs-bind-modal.cs-modal.w-modal {
        z-index: calc(var(--weline-z-overlay) + 350);
    }

    body.cs-bind-modal-open #customer-service-widget {
        pointer-events: none;
    }

    body.cs-bind-modal-open #customer-service-widget .cs-chat-window {
        visibility: hidden;
    }

    body.cs-bind-modal-open #cs-bind-modal {
        pointer-events: auto;
    }

    .cs-modal .w-modal-dialog {
        position: relative;
        z-index: 1;
        pointer-events: auto;
    }

    .cs-modal-content {
        background: var(--cs-surface);
        color: var(--cs-text);
        border: var(--border-width-thin) solid var(--cs-border);
        border-radius: var(--cs-radius-window);
        width: min(31.25rem, 100%);
        max-height: 90vh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        box-shadow: var(--cs-shadow-lg);
    }

    .cs-modal-header {
        padding: var(--weline-space-5);
        border-bottom: var(--border-width-thin) solid var(--cs-border);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--weline-space-3);
    }

    .cs-modal-header h3 {
        margin: 0;
        font-size: var(--weline-font-size-lg);
        font-weight: 650;
        color: var(--cs-text);
    }

    .cs-modal-close {
        background: transparent;
        border: var(--border-width-thin) solid transparent;
        font-size: var(--weline-font-size-lg);
        cursor: pointer;
        color: var(--cs-text-muted);
        padding: 0;
        width: 2rem;
        height: 2rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--cs-radius-control);
        transition: background-color var(--weline-motion-fast) ease, color var(--weline-motion-fast) ease;
    }

    .cs-modal-close.w-button[data-tone="quiet"] {
        background: transparent;
        border-color: transparent;
        color: var(--cs-text-muted);
    }

    .cs-modal-close.w-button[data-tone="quiet"]:hover,
    .cs-modal-close.w-modal-close:hover {
        background: var(--cs-surface-muted);
        border-color: transparent;
        color: var(--cs-text);
    }

    .cs-modal-body {
        padding: var(--weline-space-5);
        flex: 1;
        overflow-y: auto;
    }

    .cs-modal-copy {
        margin: 0 0 var(--weline-space-3);
        color: var(--cs-text);
        line-height: var(--weline-line-height);
    }

    .cs-captcha-degrade-hint {
        margin: 0 0 var(--weline-theme-space-2);
        color: var(--weline-theme-color-warning, var(--w-color-warning));
        font-size: var(--weline-theme-font-size-sm);
        line-height: 1.45;
    }

    .cs-modal-note {
        margin: 0 0 var(--weline-space-4);
        padding: var(--weline-space-3);
        border-radius: var(--cs-radius-control);
        background: color-mix(in srgb, var(--cs-accent) 10%, var(--cs-surface));
        color: var(--cs-text-muted);
        font-size: var(--weline-font-size-sm);
        line-height: var(--weline-line-height);
    }

    .cs-bind-form {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .cs-bind-form .cs-modal-footer {
        margin-top: var(--weline-space-4);
        padding: 0;
        border-top: 0;
        background: transparent;
    }

    .cs-bind-form .weline-captcha {
        margin-block: var(--weline-space-4);
    }

    .cs-bind-form .weline-captcha-row {
        flex-wrap: wrap;
    }

    .cs-w-field label {
        display: block;
        margin-bottom: var(--weline-space-2);
        font-weight: 550;
        color: var(--cs-text);
        font-size: var(--weline-font-size-sm);
    }

    .cs-form-input,
    .cs-modal .w-input,
    input.cs-form-input {
        width: 100%;
        min-height: var(--weline-control-height);
        padding: var(--weline-space-2) var(--weline-space-3);
        border: var(--border-width-thin) solid var(--cs-border-strong);
        border-radius: var(--cs-radius-control);
        font-size: var(--weline-font-size-sm);
        background: var(--cs-surface);
        color: var(--cs-text);
        color-scheme: inherit;
    }

    .cs-form-input::placeholder,
    .cs-modal .w-input::placeholder {
        color: var(--cs-text-subtle);
    }

    .cs-form-input:focus,
    .cs-modal .w-input:focus {
        outline: 0;
        border-color: var(--cs-focus);
        box-shadow: var(--focus-ring);
    }

    .cs-modal-footer {
        padding: var(--weline-space-5);
        border-top: var(--border-width-thin) solid var(--cs-border);
        display: flex;
        gap: var(--weline-space-3);
        justify-content: flex-end;
    }

    .cs-btn {
        padding: 0 var(--weline-space-5);
        min-height: var(--weline-control-height);
        border: var(--border-width-thin) solid transparent;
        border-radius: var(--cs-radius-control);
        font-size: var(--weline-font-size-sm);
        font-weight: 650;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: background-color var(--weline-motion-fast) ease, border-color var(--weline-motion-fast) ease, color var(--weline-motion-fast) ease;
    }

    .cs-btn-primary {
        background: var(--cs-accent);
        border-color: var(--cs-accent);
        color: var(--cs-on-accent);
    }

    .cs-btn-primary:hover {
        background: var(--cs-accent-hover);
        border-color: var(--cs-accent-hover);
    }

    .cs-btn-secondary {
        background: var(--cs-surface);
        border-color: var(--cs-border-strong);
        color: var(--cs-text);
    }

    .cs-btn-secondary:hover {
        background: var(--cs-surface-muted);
    }

    .cs-loading {
        text-align: center;
        padding: var(--weline-space-5);
        color: var(--cs-text-subtle);
    }

    .cs-loading i {
        animation: cs-spin 1s linear infinite;
    }

    @keyframes cs-spin {
        to { transform: rotate(360deg); }
    }

    .cs-chat-header.w-panel-header {
        padding: var(--weline-space-4) var(--weline-space-5);
        background: var(--cs-header-bg);
        color: var(--cs-header-text);
    }

    .cs-chat-body.w-panel-body {
        padding: var(--weline-space-5);
    }

    .cs-chat-footer.w-panel-footer {
        padding: var(--weline-space-4) var(--weline-space-5);
    }

    .cs-settings-panel.w-panel-body {
        padding: var(--spacing-3_5) var(--weline-space-5);
    }

    .cs-modal.w-modal {
        padding: clamp(var(--weline-space-4), 4vw, var(--weline-space-10));
        box-sizing: border-box;
    }

    .cs-modal.w-modal .w-modal-dialog {
        width: min(100%, 26.25rem);
        margin: auto;
    }

    .cs-modal-content.w-modal-content {
        width: 100%;
    }

    .cs-modal-header.w-modal-header,
    .cs-modal-footer.w-modal-footer {
        padding: var(--weline-space-4) var(--weline-space-5);
    }

    .cs-modal-body.w-modal-body {
        padding: var(--weline-space-5);
    }.customer-service-widget.is-open .cs-chat-button.cs-chat-button{
        display: none;
    }

    .cs-notice-alert {
        position: fixed;
        inset: 0;
        z-index: calc(var(--weline-z-overlay) + 500);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: max(var(--weline-space-4), env(safe-area-inset-top, 0px))
            max(var(--weline-space-4), env(safe-area-inset-right, 0px))
            max(var(--weline-space-4), env(safe-area-inset-bottom, 0px))
            max(var(--weline-space-4), env(safe-area-inset-left, 0px));
        box-sizing: border-box;
        background: color-mix(in srgb, var(--weline-theme-text) 48%, transparent);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity var(--weline-motion-fast, 160ms) ease, visibility var(--weline-motion-fast, 160ms) ease;
    }

    .cs-notice-alert.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .cs-notice-alert__dialog {
        width: min(100%, 24rem);
        max-height: min(90vh, 28rem);
        overflow: auto;
        border: var(--border-width-thin) solid var(--weline-theme-border);
        border-radius: var(--weline-radius-lg);
        background: var(--weline-theme-surface);
        color: var(--weline-theme-text);
        box-shadow: var(--weline-shadow-md);
        display: flex;
        flex-direction: column;
    }

    .cs-notice-alert__header {
        padding: var(--weline-space-4) var(--weline-space-5);
        border-bottom: var(--border-width-thin) solid var(--weline-theme-border);
    }

    .cs-notice-alert__title {
        margin: 0;
        font-size: var(--weline-font-size-lg);
        font-weight: 650;
    }

    .cs-notice-alert--error .cs-notice-alert__title {
        color: var(--weline-theme-danger);
    }

    .cs-notice-alert--success .cs-notice-alert__title {
        color: var(--weline-theme-success);
    }

    .cs-notice-alert--warning .cs-notice-alert__title {
        color: var(--weline-theme-warning);
    }

    .cs-notice-alert__body {
        padding: var(--weline-space-5);
        line-height: 1.55;
        color: var(--weline-theme-text);
        white-space: pre-wrap;
        word-break: break-word;
        display: flex;
        flex-direction: column;
        gap: var(--weline-space-3);
    }

    .cs-notice-alert__copy {
        margin: 0;
    }

    .cs-notice-alert__link {
        align-self: flex-start;
        display: inline-flex;
        text-decoration: none;
        word-break: normal;
    }

    .cs-notice-alert__inline-link {
        color: var(--weline-theme-primary);
        text-decoration: underline;
        text-underline-offset: 2px;
        word-break: break-all;
    }

    .cs-notice-alert__actions {
        display: flex;
        justify-content: flex-end;
        gap: var(--weline-space-3);
        padding: var(--weline-space-4) var(--weline-space-5);
        border-top: var(--border-width-thin) solid var(--weline-theme-border);
    }

    .cs-notice-alert__confirm {
        min-width: 6.5rem;
    }

    @media (max-width: 720px) {
        .customer-service-widget {
            bottom: calc(
                var(--weline-space-3)
                + var(--weline-safe-area-bottom, env(safe-area-inset-bottom, 0px))
            );
            right: calc(var(--weline-space-3) + var(--weline-safe-area-right, env(safe-area-inset-right, 0px)));
        }

        /* In-slot absolute (same model as StoreMusic): never viewport-fixed —
         * edge-dock transform would otherwise create a fixed containing-block trap. */
        .cs-chat-window,
        .cs-chat-window.w-panel {
            position: absolute;
            top: auto;
            left: auto;
            right: 0;
            bottom: calc(100% + 0.5rem);
            width: min(calc(100vw - 1.5rem), 23.75rem);
            height: min(calc(100dvh - 5.5rem), 37.5rem);
            max-width: calc(100vw - 1.5rem);
            max-height: min(calc(100dvh - 5.5rem), 80vh);
        }

        .cs-chat-header.w-panel-header,
        .cs-chat-footer.w-panel-footer {
            padding: var(--weline-space-3) var(--weline-space-4);
        }

        .cs-chat-body.w-panel-body,
        .cs-settings-panel.w-panel-body {
            padding: var(--weline-space-4);
        }

        .cs-chat-title {
            min-width: 0;
        }

        .cs-settings-item {
            flex-wrap: wrap;
            align-items: stretch;
        }

        .cs-settings-item .w-select,
        .cs-settings-item select {
            max-width: 100%;
            width: 100%;
            min-width: 0;
        }

        .cs-chat-button {
            width: 2.5rem;
            height: 2.5rem;
        }

        .cs-chat-button .cs-icon {
            width: 1.15rem;
            height: 1.15rem;
        }

        .cs-modal.w-modal {
            padding: max(var(--weline-space-3), env(safe-area-inset-top, 0px))
                max(var(--weline-space-3), env(safe-area-inset-right, 0px))
                max(var(--weline-space-3), env(safe-area-inset-bottom, 0px))
                max(var(--weline-space-3), env(safe-area-inset-left, 0px));
            align-items: stretch;
        }

        .cs-modal.w-modal .w-modal-dialog {
            width: 100%;
            max-width: none;
        }

        .cs-modal-footer,
        .cs-modal-footer.w-modal-footer {
            flex-wrap: wrap;
            justify-content: stretch;
        }

        .cs-modal-footer .cs-btn {
            flex: 1 1 8rem;
        }

        #cs-bind-modal.cs-modal,
        #cs-bind-modal.cs-modal.w-modal {
            z-index: calc(var(--weline-z-overlay) + 400);
        }

        body.cs-bind-modal-open #customer-service-widget .cs-chat-window,
        body.cs-bind-modal-open #customer-service-widget .cs-chat-window.w-panel {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }
    }
}

/*
 * Unlayered: Theme .w-panel-header/.w-panel-footer are unlayered and beat @layer page.
 * Keep Classic/chrome header readable (dark bg + light text) against ink/panel light surfaces.
 */
.customer-service-widget .cs-chat-header.w-panel-header {
    background: var(--cs-header-bg);
    color: var(--cs-header-text);
    border-bottom-color: color-mix(in srgb, var(--cs-header-text) 14%, transparent);
}

.customer-service-widget .cs-chat-header.w-panel-header .cs-chat-title,
.customer-service-widget .cs-chat-header.w-panel-header #cs-title-text {
    color: var(--cs-header-text);
}

.customer-service-widget .cs-chat-header.w-panel-header .cs-status-label {
    background-color: color-mix(in srgb, var(--cs-header-text) 14%, transparent);
    color: var(--cs-header-text-muted);
}

.customer-service-widget .cs-chat-header.w-panel-header .cs-status-label.cs-status-offline {
    background-color: color-mix(in srgb, var(--cs-header-text) 12%, transparent);
    color: var(--cs-header-text-muted);
}

.customer-service-widget .cs-chat-header.w-panel-header .cs-btn-icon,
.customer-service-widget .cs-chat-header.w-panel-header .w-button.cs-btn-icon {
    background: color-mix(in srgb, var(--cs-header-text) 12%, transparent);
    border-color: transparent;
    color: var(--cs-header-text);
}

.customer-service-widget .cs-chat-header.w-panel-header .cs-btn-icon:hover,
.customer-service-widget .cs-chat-header.w-panel-header .w-button.cs-btn-icon:hover {
    background: color-mix(in srgb, var(--cs-header-text) 20%, transparent);
    color: var(--cs-header-text);
}

/**
 * Affiliate float widget — storefront-float-side slot content.
 * Container chrome (positioning / edge dock) belongs to Weline_Theme
 * storefront-float-layer.css; this file styles widget content only.
 * Token-driven; no !important (default-theme rule).
 * Marker: affiliate-float-widget-v1
 */
.affiliate-float-widget {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--weline-space-2, 0.5rem);
  font-family: inherit;
}

.affiliate-float-widget__entry {
  display: inline-flex;
  align-items: center;
  gap: var(--weline-space-2, 0.5rem);
  padding: var(--weline-space-2, 0.5rem) var(--weline-space-3, 0.75rem);
  border: var(--weline-theme-border-width, 1px) var(--weline-theme-border-style, solid)
    color-mix(in srgb, var(--weline-theme-border, #e2e8f0) 70%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--weline-theme-surface-raised, #fff) 92%, transparent);
  color: var(--weline-theme-text, #111);
  font-size: 0.875rem;
  line-height: 1.2;
  cursor: pointer;
  appearance: none;
  box-shadow: var(--weline-theme-shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.08));
  transition:
    color var(--weline-theme-duration-fast, 0.16s) var(--weline-theme-easing-standard, ease),
    background-color var(--weline-theme-duration-fast, 0.16s) var(--weline-theme-easing-standard, ease);
}

.affiliate-float-widget__entry:is(:hover, :focus-visible) {
  color: var(--weline-theme-on-primary, #fff);
  background: var(--weline-theme-primary, #0f766e);
  outline: none;
}

.affiliate-float-widget__entry-icon {
  flex: none;
}

/* Collapsed widget state: label hidden, pill only (widget-level collapse, mirrors CS FAB). */
.affiliate-float-widget:not(.is-panel-open) .affiliate-float-widget__entry-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.affiliate-float-widget__panel {
  width: min(20rem, calc(100vw - 4rem));
  max-height: min(60vh, 26rem);
  overflow-y: auto;
  padding: var(--weline-space-4, 1rem);
}

.affiliate-float-widget__status:empty {
  display: none;
}

.affiliate-float-widget__status {
  margin: 0 0 var(--weline-space-2, 0.5rem);
  font-size: 0.8125rem;
  color: var(--weline-theme-text-muted, #565959);
}

.affiliate-float-widget__eyebrow {
  margin: 0 0 var(--weline-space-1, 0.25rem);
  color: var(--weline-theme-text-muted, #565959);
  font-size: var(--weline-font-size-xs, 0.6875rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.affiliate-float-widget__title {
  margin: 0 0 var(--weline-space-2, 0.5rem);
  color: var(--weline-theme-text, #111);
  font-size: var(--weline-font-size-base, 1rem);
  line-height: 1.3;
}

.affiliate-float-widget__rules {
  display: grid;
  gap: var(--weline-space-1, 0.25rem);
  margin: 0 0 var(--weline-space-3, 0.75rem);
  padding-inline-start: var(--weline-space-4, 1rem);
  color: var(--weline-theme-text, #111);
  font-size: var(--weline-font-size-sm, 0.8125rem);
  line-height: 1.45;
}

.affiliate-float-widget__note {
  margin: 0 0 var(--weline-space-3, 0.75rem);
  color: var(--weline-theme-text-muted, #565959);
  font-size: var(--weline-font-size-sm, 0.8125rem);
  line-height: 1.45;
}

.affiliate-float-widget__member {
  margin: 0 0 var(--weline-space-3, 0.75rem);
  padding: var(--weline-space-3, 0.75rem);
  border-radius: var(--weline-radius-sm, 6px);
  background: color-mix(
    in srgb,
    var(--weline-theme-primary, #0f766e) 6%,
    var(--weline-theme-surface-raised, #fff)
  );
}

.affiliate-float-widget__member-title {
  margin: 0 0 var(--weline-space-2, 0.5rem);
  color: var(--weline-theme-text, #111);
  font-size: var(--weline-font-size-sm, 0.8125rem);
}

.affiliate-float-widget__member-list {
  display: grid;
  gap: var(--weline-space-1, 0.25rem);
  margin: 0;
}

.affiliate-float-widget__member-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--weline-space-2, 0.5rem);
}

.affiliate-float-widget__member-label {
  color: var(--weline-theme-text-muted, #565959);
  font-size: var(--weline-font-size-xs, 0.6875rem);
}

.affiliate-float-widget__member-value {
  margin: 0;
  color: var(--weline-theme-text, #111);
  font-size: var(--weline-font-size-sm, 0.8125rem);
  font-weight: 600;
  text-align: end;
}

.affiliate-float-widget__metric {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--weline-space-3, 0.75rem);
  margin-bottom: var(--weline-space-3, 0.75rem);
}

.affiliate-float-widget__metric-label {
  font-size: 0.8125rem;
  color: var(--weline-theme-text-muted, #565959);
}

.affiliate-float-widget__metric-value {
  font-size: 1.125rem;
  color: var(--weline-theme-text, #111);
}

.affiliate-float-widget__link-row {
  display: flex;
  gap: var(--weline-space-2, 0.5rem);
  margin-bottom: var(--weline-space-3, 0.75rem);
}

.affiliate-float-widget__link {
  flex: 1;
  min-width: 0;
  padding: var(--weline-space-2, 0.5rem);
  border: var(--weline-theme-border-width, 1px) var(--weline-theme-border-style, solid)
    var(--weline-theme-border, #e2e8f0);
  border-radius: var(--weline-radius-sm, 6px);
  font-size: 0.8125rem;
  color: var(--weline-theme-text, #111);
  background: var(--weline-theme-surface, #fff);
}

.affiliate-float-widget__copy,
.affiliate-float-widget__cta {
  padding: var(--weline-space-2, 0.5rem) var(--weline-space-3, 0.75rem);
  border: none;
  border-radius: var(--weline-radius-sm, 6px);
  background: var(--weline-theme-primary, #0f766e);
  color: var(--weline-theme-on-primary, #fff);
  font-size: 0.8125rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.affiliate-float-widget__copy {
  background: color-mix(
    in srgb,
    var(--weline-theme-primary, #0f766e) 12%,
    var(--weline-theme-surface-raised, #fff)
  );
  color: var(--weline-theme-primary, #0f766e);
}

.affiliate-float-widget__cta {
  display: flex;
  width: 100%;
}

.affiliate-float-widget__cta:is(:hover, :focus-visible),
.affiliate-float-widget__copy:is(:hover, :focus-visible) {
  background: var(--weline-theme-primary, #0f766e);
  color: var(--weline-theme-on-primary, #fff);
  outline: none;
}

@media (max-width: 720px) {
  .affiliate-float-widget__panel {
    width: min(16rem, calc(100vw - 3rem));
  }
}

/**
 * 悬浮社媒（左侧贴边）—— 全站共享 chrome 部件皮肤。
 * 只消费 Theme Token；var() 内的值是 Token 未加载时的兜底。
 * 收起/展开由 footerSocialFloat 模块写 .is-collapsed + inline transform。
 */
.w-social-float {
    position:fixed;
    top: 50%;
    left: max(0px, env(safe-area-inset-left, 0px));
    z-index: var(--z-index-fixed, 1030);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--weline-space-1, 0.25rem);
    padding: var(--weline-space-2, 0.5rem) var(--weline-space-1, 0.25rem);
    transform: translateY(-50%);
    color: var(--weline-theme-text, #1f2937);
    background: var(--weline-theme-surface-raised, #ffffff);
    border: var(--weline-theme-border-width, 1px) solid var(--weline-theme-border, #e2e8f0);
    border-left-width: var(--weline-space-1, 0.25rem);
    border-left-color: var(--weline-theme-primary, #0f766e);
    border-radius: 0 var(--weline-radius-md, 8px) var(--weline-radius-md, 8px) 0;
    box-shadow: var(--weline-theme-shadow-md, 0 8px 24px rgba(15, 23, 42, 0.08));
    transition: transform var(--weline-theme-duration-normal, 0.28s) var(--weline-theme-easing-standard, cubic-bezier(0.22, 1, 0.36, 1));
}

.w-social-float__panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--weline-space-1, 0.25rem);
}

.w-social-float__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--weline-space-5, 1.25rem) + var(--weline-space-1, 0.25rem));
    height: calc(var(--weline-space-5, 1.25rem) + var(--weline-space-1, 0.25rem));
    color: var(--weline-theme-text, #1f2937);
    background: var(--weline-theme-surface, #ffffff);
    border: var(--weline-theme-border-width, 1px) solid var(--weline-theme-border, #e2e8f0);
    border-radius: var(--weline-radius-sm, 4px);
    box-shadow: var(--weline-theme-shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.08));
    text-decoration: none;
    transition:
        color var(--weline-theme-duration-fast, 0.16s) var(--weline-theme-easing-standard, cubic-bezier(0.22, 1, 0.36, 1)),
        background-color var(--weline-theme-duration-fast, 0.16s) var(--weline-theme-easing-standard, cubic-bezier(0.22, 1, 0.36, 1));
}

.w-social-float__link:is(:hover, :focus-visible) {
    color: var(--weline-theme-on-primary, #ffffff);
    background: var(--weline-theme-primary, #0f766e);
    border-color: var(--weline-theme-primary, #0f766e);
    outline: none;
}

.w-social-float__link .footer-social-icon {
    width: var(--weline-space-4, 1rem);
    height: var(--weline-space-4, 1rem);
    color: inherit;
    fill: currentColor;
}

.w-social-float__toggle {
    position: absolute;
    top: 50%;
    left: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--weline-space-5, 1.25rem);
    height: calc(var(--weline-space-8, 2rem) + var(--weline-space-1, 0.25rem));
    margin: 0;
    padding: 0;
    transform: translateY(-50%);
    color: var(--weline-theme-primary, #0f766e);
    background: var(--weline-theme-surface-raised, #ffffff);
    border: var(--weline-theme-border-width, 1px) solid var(--weline-theme-border, #e2e8f0);
    border-left: none;
    border-radius: 0 var(--weline-radius-md, 8px) var(--weline-radius-md, 8px) 0;
    box-shadow: var(--weline-theme-shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.08));
    cursor: pointer;
    appearance: none;
}

.w-social-float__toggle:is(:hover, :focus-visible) {
    color: var(--weline-theme-on-primary, #ffffff);
    background: var(--weline-theme-primary, #0f766e);
    outline: none;
}

.w-social-float__toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    transition: transform var(--weline-theme-duration-normal, 0.28s) var(--weline-theme-easing-standard, cubic-bezier(0.22, 1, 0.36, 1));
}

.w-social-float.is-collapsed {
    transform: translateY(-50%) translateX(-100%);
}

.w-social-float.is-collapsed .w-social-float__panel {
    visibility: hidden;
    pointer-events: none;
}

.w-social-float.is-collapsed .w-social-float__toggle-icon {
    transform: scaleX(-1);
}

/* 旧 footer 容器社媒条与本部件并存时只保留本部件（防双轨） */
body:has(.w-social-float) .footer-social-float {
    display: none !important;
}

@media (max-width: 720px) {
    .w-social-float {
        padding: var(--weline-space-1, 0.25rem);
    }
    .w-social-float__link {
        width: var(--weline-space-6, 1.5rem);
        height: var(--weline-space-6, 1.5rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .w-social-float,
    .w-social-float__link,
    .w-social-float__toggle-icon {
        transition: none;
    }
}