/* Silver storefront widgets. The runtime uses light DOM and injects its CSS
   after load, so each rule is explicitly theme-scoped. No chat behavior,
   channel identity, payment state or wear meaning is changed here. */
html[data-theme="silver"] {
  --lc-primary: var(--sl-primary);
  --lc-primary-soft: #657181;
  --lc-accent: var(--sl-primary);
  --lc-accent-soft: #CBD1D9;
  --lc-ink: var(--sl-ink);
  --lc-ink-soft: var(--sl-muted);
  --lc-muted: #656E7C;
  --lc-line: var(--sl-line);
  --lc-line-soft: #EEF0F3;
  --lc-bg: #F4F5F7;
  --sl-widget-focus: 0 0 0 3px rgba(69,77,92,.15);
}

/* One quiet launcher for the buyer and the manager. Online and unread badges
   remain visible; the spinning gear and rings are decorative only. */
html[data-theme="silver"] :is(.lc-fab, .lmrk-admin-chat-fab) {
  background: var(--sl-ink);
  color: #fff;
  animation: none;
  transition: transform 180ms var(--sl-ease), background 180ms ease;
  box-shadow: 0 3px 8px rgba(44,47,56,.18);
}
html[data-theme="silver"] :is(.lc-fab, .lmrk-admin-chat-fab):hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 8px rgba(44,47,56,.22);
}
html[data-theme="silver"] :is(.lc-fab, .lmrk-admin-chat-fab):active { transform: scale(.97); }
html[data-theme="silver"] :is(.lc-fab__gear, .lc-fab__pulse, .lmrk-fab-gear, .lmrk-fab-pulse) { display: none; }
html[data-theme="silver"] :is(.lc-d1, .lc-d2, .lc-d3, .lmrk-d1, .lmrk-d2, .lmrk-d3) { animation: none; }
html[data-theme="silver"] :is(.lc-fab__unread, #lmrk-admin-fab-badge) {
  background: #B4233D;
  color: #fff;
  box-shadow: none;
}

/* Buyer chat. Keep the existing textarea auto-grow and visualViewport geometry. */
html[data-theme="silver"] .lc-window {
  border-radius: 16px;
  border: 1px solid var(--sl-line);
  box-shadow: 0 3px 8px rgba(44,47,56,.16);
  transition-duration: 200ms;
}
html[data-theme="silver"] .lc-window__head {
  /* Overrides Silver shell's earlier dark !important header. */
  background: var(--sl-surface) !important;
  color: var(--sl-ink);
  border-color: var(--sl-line);
}
html[data-theme="silver"] .lc-window__head::before { display: none; }
html[data-theme="silver"] .lc-window__avatar {
  background: var(--sl-surface);
  box-shadow: none;
  border: 1px solid var(--sl-line);
  border-radius: 10px;
}
html[data-theme="silver"] .lc-window__avatar-img {
  filter: grayscale(1);
  border-radius: 9px;
}
html[data-theme="silver"] .lc-user-label {
  color: var(--sl-primary);
  background: #E9ECF0;
  font-size: 11px;
}
html[data-theme="silver"] .lc-wib--close:hover {
  background: #EEF0F3;
  color: var(--sl-ink);
  transform: none;
}
html[data-theme="silver"] :is(.lc-msg__avatar, .lc-invite__avatar) {
  background: var(--sl-primary);
  color: #fff;
  box-shadow: none;
}
html[data-theme="silver"] .lc-msg--out .lc-msg__bubble {
  background: var(--sl-primary);
  color: #fff;
  box-shadow: none;
}
html[data-theme="silver"] .lc-msg__bubble { line-height: 1.55; }
html[data-theme="silver"] :is(.lc-cart, #lw-send) {
  background: var(--sl-primary);
  color: #fff;
  box-shadow: none;
  transition: transform 160ms var(--sl-ease), background 160ms ease;
}
html[data-theme="silver"] :is(.lc-cart, #lw-send):hover {
  background: var(--sl-ink);
  box-shadow: none;
  transform: translateY(-1px);
}
html[data-theme="silver"] :is(.lc-open:hover, .lc-msg--in .lc-msg__bubble a,
  .lc-msg--in .lc-msg__bubble a:hover) { box-shadow: none; }
html[data-theme="silver"] .lc-agent__dots span { background: var(--sl-primary); }
html[data-theme="silver"] .lc-typing__pen { color: var(--sl-primary); }
html[data-theme="silver"] .lc-typing__line { background: #DCE1E8; }
html[data-theme="silver"] .lc-typing__line::after { background: var(--sl-primary); }
html[data-theme="silver"] .lc-typing__label { color: var(--sl-muted); }
html[data-theme="silver"] #lw-inp {
  border-radius: 12px;
  border-color: var(--sl-line);
}
html[data-theme="silver"] #lw-inp:focus {
  border-color: var(--sl-primary);
  box-shadow: var(--sl-widget-focus);
}
html[data-theme="silver"] .lc-msg__time { font-size: 11px; }
html[data-theme="silver"] .lc-foot-meta { font-size: 11px; letter-spacing: 0; }

/* Proactive manager teaser. Preserve actual portraits; only the LEMARK logo
   receives the same monochrome treatment as the site header. */
html[data-theme="silver"] .lc-invite {
  width: 320px;
  max-width: calc(100vw - 32px);
  padding: 16px 44px 16px 64px;
  border: 1px solid var(--sl-line);
  border-radius: 16px;
  box-shadow: 0 3px 8px rgba(44,47,56,.14);
  transition: transform 200ms var(--sl-ease), opacity 180ms ease;
}
html[data-theme="silver"] .lc-invite--open { animation: none; }
html[data-theme="silver"] .lc-invite__avatar {
  left: 16px;
  right: auto;
  top: 16px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
}
html[data-theme="silver"] .lc-invite__avatar img { border-radius: 10px; }
html[data-theme="silver"] .lc-invite__avatar img[src*="lemark-icon"] { filter: grayscale(1); }
html[data-theme="silver"] .lc-invite__name {
  color: var(--sl-ink);
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  margin-bottom: 4px;
}
html[data-theme="silver"] .lc-invite__text { font-size: 14px; line-height: 1.5; }
html[data-theme="silver"] .lc-invite__close {
  right: 8px;
  left: auto;
  top: 8px;
  width: 32px;
  height: 32px;
}

/* Manager mini-chat on the storefront. React chat has its own theme and is
   intentionally outside this stylesheet. Platform badges/portraits are intact. */
html[data-theme="silver"] #ac-sidebar { box-shadow: 2px 0 8px rgba(44,47,56,.12); }
html[data-theme="silver"] #ac-sidebar .acs-head { background: var(--sl-ink); }
html[data-theme="silver"] #ac-sidebar .acs-head::before,
html[data-theme="silver"] #ac-sidebar .acs-head::after { display: none; }
html[data-theme="silver"] #ac-sidebar .acs-title h1 { text-transform: none; letter-spacing: 0; }
html[data-theme="silver"] #ac-sidebar :is(.acs-title-mark, .acs-close-btn, .acs-nav-btn):hover { transform: none; }
html[data-theme="silver"] #ac-sidebar :is(.acs-admin-av, .acs-nav-btn.is-on) { color: var(--sl-primary); }
html[data-theme="silver"] #ac-sidebar .acs-nav-btn.is-on::after { border-color: var(--sl-ink); }
html[data-theme="silver"] #ac-sidebar .acs-tab.is-active { color: var(--sl-primary); }
html[data-theme="silver"] #ac-sidebar .acs-tab.is-active::after { background: var(--sl-primary); }
html[data-theme="silver"] #ac-sidebar .acs-tab.is-active .acs-tab-cnt {
  color: var(--sl-primary);
  background: #E9ECF0;
}
html[data-theme="silver"] #ac-sidebar .acs-chip:hover {
  border-color: #A6ADB8;
  color: var(--sl-primary);
}
html[data-theme="silver"] #ac-sidebar .acs-chip.is-active {
  background: var(--sl-primary);
  color: #fff;
  box-shadow: none;
}
html[data-theme="silver"] #ac-sidebar :is(.acs-search-input, .ac-textarea):focus {
  border-color: var(--sl-primary);
  box-shadow: var(--sl-widget-focus);
}
html[data-theme="silver"] #ac-sidebar :is(.acs-search-input, .ac-textarea)::placeholder { color: var(--sl-muted); }
html[data-theme="silver"] #ac-sidebar .acs-item.is-active { background: #E9ECF0; }
html[data-theme="silver"] #ac-sidebar .acs-item.is-active::before { display: none; }
html[data-theme="silver"] #ac-sidebar .acs-avatar {
  background: var(--sl-primary);
  color: #fff;
}
html[data-theme="silver"] #ac-sidebar :is(.acs-item-contact, .acs-item-time, .acs-item-lastmsg) { color: var(--sl-muted); }
html[data-theme="silver"] #ac-sidebar .acs-item-lastmsg.is-unread { color: var(--sl-ink); }
html[data-theme="silver"] #ac-sidebar .acs-unread,
html[data-theme="silver"] #ac-sidebar .acs-tab .acs-tab-cnt.has-new {
  background: #B4233D;
  color: #fff;
  box-shadow: none;
}
html[data-theme="silver"] #ac-sidebar .acs-tab.is-active .acs-tab-cnt.has-new {
  background: #B4233D;
  color: #fff;
}
html[data-theme="silver"] #ac-sidebar :is(.acs-back-btn:hover, .acs-kebab-btn:hover,
  .ac-icon-btn:hover, .ac-itab:hover) {
  background: #E9ECF0;
  border-color: #A6ADB8;
  color: var(--sl-primary);
  transform: none;
}
html[data-theme="silver"] #ac-sidebar .acs-actions-dropdown #ac-btn-transfer:hover {
  background: #E9ECF0;
  color: var(--sl-primary);
}
html[data-theme="silver"] #ac-sidebar .acs-actions-dropdown #ac-btn-transfer:hover svg { color: var(--sl-primary); }
html[data-theme="silver"] :is(.ac-bubble-out, .ac-send-btn, .ac-audio-play, .ac-toast__ico) {
  background: var(--sl-primary);
  color: #fff;
  box-shadow: none;
}
html[data-theme="silver"] :is(.ac-send-btn:hover, .ac-audio-play:hover) { box-shadow: none; }
html[data-theme="silver"] .ac-bubble-out .ac-audio-play {
  background: #fff;
  color: var(--sl-primary);
}
html[data-theme="silver"] .ac-audio-player.is-playing .ac-audio-waves span { background: var(--sl-primary); }
html[data-theme="silver"] .ac-bubble-out .ac-audio-player.is-playing .ac-audio-waves span { background: #fff; }
html[data-theme="silver"] .ac-itab.active { border-color: var(--sl-primary); color: var(--sl-primary); }
html[data-theme="silver"] :is(.ac-vin-badge, .ac-vin-photo-badge):not(.is-copied) {
  background: #EEF0F3;
  border: 1px solid var(--sl-line);
  box-shadow: none;
}
html[data-theme="silver"] .ac-vin-badge :is(.ac-vin-badge__code, .ac-vin-badge__arrow),
html[data-theme="silver"] .ac-vin-photo-badge:not(.is-copied) :is(.ac-vin-photo-badge__code,
  .ac-vin-photo-badge__copy-ico, .ac-vin-photo-badge__open),
html[data-theme="silver"] .ac-toast__code { color: var(--sl-primary); }

/* These named mini-chat controls use inline presentation in the legacy
   template. Important is limited to color/shadow, never disabled or visibility. */
html[data-theme="silver"] :is(#ac-ai-suggest-btn, #ac-inv-submit, #ac-rem-submit,
  #ac-items-picker-add) {
  background: var(--sl-primary) !important;
  color: #fff !important;
  box-shadow: none !important;
}
html[data-theme="silver"] #ac-ai-send-products {
  background: var(--sl-surface) !important;
  color: var(--sl-primary) !important;
  border-color: #A6ADB8 !important;
}

/* Wear remains a semantic green/amber/red scale. Only its reading surface and
   contrast are refined; percentages, labels and supplier definitions stay put. */
html[data-theme="silver"] .lc-wear--excellent { --sl-wear-ink: #166534; }
html[data-theme="silver"] .lc-wear--good { --sl-wear-ink: #3F6212; }
html[data-theme="silver"] .lc-wear--fair { --sl-wear-ink: #92400E; }
html[data-theme="silver"] .lc-wear--poor { --sl-wear-ink: #991B1B; }
html[data-theme="silver"] .lc-wear__tip {
  background: var(--sl-ink);
  width: 272px;
  max-width: calc(100vw - 32px);
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 3px 8px rgba(44,47,56,.2);
  transition-duration: 160ms;
  transition-timing-function: var(--sl-ease);
}
html[data-theme="silver"] .lc-wear__tip::after { background: var(--sl-ink); }
html[data-theme="silver"] .lc-wear__tip-head { gap: 8px; flex-wrap: wrap; align-items: flex-start; }
html[data-theme="silver"] .lc-wear__tip-grade { font-size: 14px; line-height: 1.4; min-width: 110px; }
html[data-theme="silver"] .lc-wear__tip-pct {
  color: var(--sl-wear-ink);
  background: var(--wear-color-soft);
  font-size: 12px;
  border-radius: 6px;
}
html[data-theme="silver"] .lc-wear__tip-desc { color: #F0F2F5; font-size: 13px; line-height: 1.6; }
html[data-theme="silver"] .lc-wear__tip-foot {
  color: #D3D8E1;
  font-size: 12px;
  line-height: 1.5;
  border-color: #515866;
}
html[data-theme="silver"] .lc-wear__tip-fill { transition-duration: 180ms; }
html[data-theme="silver"] .lc-wear:focus-visible {
  outline: 2px solid var(--sl-primary);
  outline-offset: 3px;
}
html[data-theme="silver"] .lc-wear:focus-visible .lc-wear__tip { opacity: 1; pointer-events: auto; }
html[data-theme="silver"] .lc-wear:focus-visible .lc-wear__tip-fill { width: calc(var(--wear-pct) * 1%); }

@media (max-width: 880px) {
  html[data-theme="silver"] body:has(.sl-dock) .lc-invite { bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
  html[data-theme="silver"] body:has(.sl-dock) .lc-invite::before { display: none; }
}
@media (max-width: 480px) {
  html[data-theme="silver"] .lc-window { border: 0; border-radius: 0; }
  html[data-theme="silver"] .lc-wib--close { min-width: 44px; min-height: 44px; }
  html[data-theme="silver"] .lc-invite__close { width: 40px; height: 40px; right: 2px; top: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme="silver"] :is(.lc-window, .lc-invite, .lc-msg, .lc-wear__tip, .lc-wear__tip-fill) {
    transition: none;
    animation: none;
  }
}
