@layer mixlivo-support-widget {
/* MixLivo support panel. Existing floating-link placement remains unchanged. */
html body #mixlivo-support-panel {
  --ml-support-ready: 1 !important;
  position: fixed !important;
  z-index: 120 !important;
  right: 22px !important;
  bottom: 100px !important;
  width: 368px !important;
  max-height: min(650px, calc(100dvh - 124px)) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  border: 1px solid #ded7ed !important;
  border-radius: 18px !important;
  background: #fffdf8 !important;
  color: #23213b !important;
  box-shadow: 0 18px 56px #31204d26 !important;
  font: 14px/1.65 system-ui, "Microsoft YaHei", sans-serif !important;
  text-align: left !important;
}
html body #mixlivo-support-panel[hidden],html body #mixlivo-support-panel [hidden] { display: none !important; }
html body #mixlivo-support-panel * { box-sizing: border-box !important; }
#mixlivo-support-panel .ml-support-header { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; padding: 18px 18px 12px !important; flex: 0 0 auto !important; }
#mixlivo-support-panel .ml-support-brand { display: block !important; color: #7563a0 !important; font-size: 11px !important; font-weight: 650 !important; letter-spacing: .05em !important; }
#mixlivo-support-panel .ml-support-title { margin: 1px 0 0 !important; font-size: 19px !important; line-height: 1.5 !important; font-weight: 750 !important; }
#mixlivo-support-panel button { font: inherit !important; cursor: pointer !important; }
#mixlivo-support-panel .ml-support-dismiss { width: 36px !important; height: 36px !important; flex: 0 0 auto !important; padding: 0 !important; display: grid !important; place-items: center !important; border: 0 !important; border-radius: 10px !important; background: #f1ecf8 !important; color: #6650a4 !important; font-size: 25px !important; line-height: 1 !important; }
#mixlivo-support-panel .ml-support-tabs { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 5px !important; padding: 4px !important; margin: 0 18px 14px !important; border-radius: 11px !important; background: #f0ecf7 !important; flex: 0 0 auto !important; }
#mixlivo-support-panel .ml-support-tab { padding: 9px 8px !important; border: 0 !important; border-radius: 8px !important; color: #665d7a !important; background: transparent !important; font-size: 13px !important; font-weight: 650 !important; }
#mixlivo-support-panel .ml-support-tab[aria-selected="true"] { color: #fff !important; background: #6650cb !important; box-shadow: 0 2px 6px #6650cb1a !important; }
#mixlivo-support-panel .ml-support-scroll { min-height: 0 !important; overflow-y: auto !important; overscroll-behavior: contain !important; padding: 0 18px 4px !important; scrollbar-width: thin !important; }
#mixlivo-support-panel .ml-support-faq { margin: 0 0 9px !important; border: 1px solid #e7e1ed !important; border-radius: 10px !important; background: #fff !important; }
#mixlivo-support-panel .ml-support-question { position: relative !important; padding: 12px 31px 12px 13px !important; cursor: pointer !important; font-size: 13px !important; font-weight: 650 !important; list-style: none !important; line-height: 1.65 !important; }
#mixlivo-support-panel .ml-support-question::-webkit-details-marker { display: none !important; }
#mixlivo-support-panel .ml-support-question::after { content: "+" !important; position: absolute !important; right: 12px !important; top: 11px !important; color: #7966a9 !important; font-size: 17px !important; font-weight: 500 !important; }
#mixlivo-support-panel details[open] > .ml-support-question::after { content: "−" !important; }
#mixlivo-support-panel details[open] > .ml-support-question { color: #5a43b3 !important; }
#mixlivo-support-panel .ml-support-answer { padding: 0 13px 13px !important; color: #625970 !important; font-size: 12px !important; line-height: 1.85 !important; }
#mixlivo-support-panel .ml-support-answer p { margin: 0 !important; }
#mixlivo-support-panel .ml-support-inline-link { display: inline-block !important; color: #6650cb !important; margin: 7px 12px 0 0 !important; font-weight: 600 !important; text-decoration: none !important; }
#mixlivo-support-panel .ml-support-contact { padding: 2px 0 8px !important; text-align: center !important; }
#mixlivo-support-panel .ml-support-contact-label { margin: 0 0 8px !important; color: #756985 !important; font-size: 12px !important; }
#mixlivo-support-panel .ml-support-copy-row { display: flex !important; align-items: center !important; justify-content: center !important; gap: 9px !important; margin-bottom: 16px !important; }
#mixlivo-support-panel .ml-support-number { width: 168px !important; min-width: 0 !important; padding: 5px 0 !important; border: 0 !important; background: transparent !important; color: #302748 !important; font: 750 23px/1.4 system-ui, sans-serif !important; font-variant-numeric: tabular-nums !important; text-align: center !important; }
#mixlivo-support-panel .ml-support-copy { border: 1px solid #ddd3f6 !important; border-radius: 8px !important; padding: 7px 10px !important; color: #6650b7 !important; background: #f1ecfc !important; font-size: 12px !important; font-weight: 650 !important; white-space: nowrap !important; }
#mixlivo-support-panel .ml-support-qr { width: 208px !important; height: 208px !important; padding: 8px !important; border: 1px solid #eee9f2 !important; border-radius: 16px !important; background: #fff !important; margin: 0 auto 12px !important; }
#mixlivo-support-panel .ml-support-qr img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: 50% 65% !important; border-radius: 9px !important; }
#mixlivo-support-panel .ml-support-qr-caption { margin: 0 !important; color: #756985 !important; font-size: 12px !important; }
#mixlivo-support-panel .ml-support-feedback { min-height: 22px !important; margin: 7px 0 0 !important; color: #6650b7 !important; font-size: 12px !important; }
#mixlivo-support-panel .ml-support-footer { padding: 11px 18px 13px !important; border-top: 1px solid #ebe5ef !important; background: #fcfaf6 !important; text-align: center !important; flex: 0 0 auto !important; }
#mixlivo-support-panel .ml-support-help { color: #6650b7 !important; font-size: 12px !important; font-weight: 650 !important; text-decoration: none !important; }
#mixlivo-support-panel :is(button,a,input,summary):focus-visible { outline: 3px solid #b3a1e5 !important; outline-offset: 2px !important; }
@media (max-width: 767px) {
  html body #mixlivo-support-panel { right: 12px !important; left: 12px !important; bottom: calc(88px + env(safe-area-inset-bottom)) !important; width: auto !important; max-height: calc(100dvh - 110px - env(safe-area-inset-bottom)) !important; }
}
  html.dark body #mixlivo-support-panel { background: #24202e !important; color: #f0e9fb !important; border-color: #57496a !important; }
  html.dark body #mixlivo-support-panel .ml-support-faq { background: #302937 !important; border-color: #57496a !important; }
  html.dark body #mixlivo-support-panel .ml-support-answer,html.dark body #mixlivo-support-panel .ml-support-contact-label,html.dark body #mixlivo-support-panel .ml-support-qr-caption { color: #d2c7df !important; }
  html.dark body #mixlivo-support-panel .ml-support-number { color: #e8def7 !important; }
  html.dark body #mixlivo-support-panel .ml-support-footer { background: #292330 !important; border-color: #57496a !important; }
  html.dark body #mixlivo-support-panel .ml-support-brand { color: #c0addf !important; }
  html.dark body #mixlivo-support-panel .ml-support-title,html.dark body #mixlivo-support-panel .ml-support-question { color: #f0e9fb !important; }
  html.dark body #mixlivo-support-panel details[open] > .ml-support-question,html.dark body #mixlivo-support-panel .ml-support-inline-link,html.dark body #mixlivo-support-panel .ml-support-help,html.dark body #mixlivo-support-panel .ml-support-feedback { color: #c5b3ff !important; }

/* Explicit text colors and important rules isolate the panel from legacy page resets. */
#mixlivo-support-panel :is(p,span,h2,summary,input,button,a) { font-family: inherit !important; }
#mixlivo-support-panel .ml-support-title,#mixlivo-support-panel .ml-support-question { color: #23213b !important; }
#mixlivo-support-panel .ml-support-answer p { color: #625970 !important; font-size: 12px !important; line-height: 1.85 !important; }
html.dark body #mixlivo-support-panel .ml-support-title,html.dark body #mixlivo-support-panel .ml-support-question { color: #f0e9fb !important; }
html.dark body #mixlivo-support-panel .ml-support-answer p { color: #d2c7df !important; }

/* Preserve the existing trigger geometry while keeping it legible in reader layers. */
html body .mix-support-float { background: #6650cb !important; color: #fff !important; border-color: #8470df !important; }
html body .mix-support-float :is(span,svg) { color: #fff !important; }
/* Low specificity within our first layer: painted cards/buttons override this reset. */
#mixlivo-support-panel :where(header,footer,div,p,span,h2,a,summary,input,button,details) { background-color: transparent !important; background-image: none !important; }
}