/**
 * Shared customer service dialog.
 * This is the single visual implementation used by the home page and user pages.
 */

html body #jnCustomerServiceRuntime#jnCustomerServiceRuntime#jnCustomerServiceRuntime {
  --customer-overlay: transparent;
  --customer-panel: linear-gradient(180deg, rgba(54, 54, 57, .97), rgba(39, 39, 42, .97));
  --customer-panel-line: rgba(255, 255, 255, .14);
  --customer-panel-shadow: 0 28px 80px rgba(18, 18, 19, .42), inset 0 1px 0 rgba(255, 255, 255, .08);
  --customer-heading: #f5f4f2;
  --customer-text: #bbb8b4;
  --customer-surface: rgba(255, 255, 255, .075);
  --customer-surface-soft: rgba(255, 255, 255, .05);
  --customer-surface-line: rgba(255, 255, 255, .13);
  --customer-close-bg: rgba(255, 255, 255, .10);
  --customer-close-bg-hover: rgba(255, 255, 255, .16);
  --customer-close-text: #e8e6e3;
  --customer-action-bg: rgba(45, 212, 191, .11);
  --customer-action-bg-hover: rgba(45, 212, 191, .17);
  --customer-action-line: rgba(94, 234, 212, .28);
  --customer-action-text: #d5faf3;
  --customer-qr-shell: linear-gradient(180deg, #ffffff, #f1f0ed);
  --customer-qr-line: rgba(255, 255, 255, .72);
  --customer-qr-shadow: 0 14px 32px rgba(18, 18, 19, .26), inset 0 1px 0 rgba(255, 255, 255, .94);
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483635 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  margin: 0 !important;
  pointer-events: auto !important;
  color-scheme: dark !important;
}

html.jn-light-mode body #jnCustomerServiceRuntime#jnCustomerServiceRuntime#jnCustomerServiceRuntime,
html[data-theme="light"] body #jnCustomerServiceRuntime#jnCustomerServiceRuntime#jnCustomerServiceRuntime,
html body.jn-light-mode #jnCustomerServiceRuntime#jnCustomerServiceRuntime#jnCustomerServiceRuntime,
html body[data-theme="light"] #jnCustomerServiceRuntime#jnCustomerServiceRuntime#jnCustomerServiceRuntime {
  --customer-overlay: transparent;
  --customer-panel: linear-gradient(180deg, rgba(253, 252, 250, .98), rgba(244, 242, 238, .98));
  --customer-panel-line: rgba(70, 66, 61, .14);
  --customer-panel-shadow: 0 28px 72px rgba(50, 46, 42, .20), inset 0 1px 0 rgba(255, 255, 255, .96);
  --customer-heading: #2f2d2a;
  --customer-text: #706b65;
  --customer-surface: rgba(255, 255, 255, .72);
  --customer-surface-soft: rgba(255, 255, 255, .56);
  --customer-surface-line: rgba(70, 66, 61, .12);
  --customer-close-bg: rgba(77, 72, 66, .08);
  --customer-close-bg-hover: rgba(77, 72, 66, .14);
  --customer-close-text: #57534e;
  --customer-action-bg: rgba(13, 148, 136, .09);
  --customer-action-bg-hover: rgba(13, 148, 136, .15);
  --customer-action-line: rgba(13, 148, 136, .24);
  --customer-action-text: #126b5f;
  --customer-qr-shell: linear-gradient(180deg, #ffffff, #f5f4f1);
  --customer-qr-line: rgba(70, 66, 61, .11);
  --customer-qr-shadow: 0 12px 26px rgba(50, 46, 42, .14), inset 0 1px 0 rgba(255, 255, 255, .96);
  color-scheme: light !important;
}

html body #jnCustomerServiceRuntime#jnCustomerServiceRuntime#jnCustomerServiceRuntime,
html body #jnCustomerServiceRuntime#jnCustomerServiceRuntime#jnCustomerServiceRuntime *,
html body #jnCustomerServiceRuntime#jnCustomerServiceRuntime#jnCustomerServiceRuntime *::before,
html body #jnCustomerServiceRuntime#jnCustomerServiceRuntime#jnCustomerServiceRuntime *::after {
  box-sizing: border-box !important;
  letter-spacing: 0 !important;
}

html body #jnCustomerServiceRuntime#jnCustomerServiceRuntime#jnCustomerServiceRuntime .customer-modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: grid !important;
  place-items: center !important;
  align-items: center !important;
  justify-items: center !important;
  align-content: center !important;
  justify-content: center !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  margin: 0 !important;
  padding: 20px !important;
  overflow: auto !important;
  background: var(--customer-overlay) !important;
  color: var(--customer-heading) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body #jnCustomerServiceRuntime#jnCustomerServiceRuntime#jnCustomerServiceRuntime .customer-modal.replica-customer-modal {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  display: block !important;
  align-self: center !important;
  justify-self: center !important;
  width: min(300px, calc(100vw - 32px)) !important;
  max-width: 300px !important;
  max-height: calc(100dvh - 40px) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--customer-panel-line) !important;
  border-radius: 18px !important;
  background: var(--customer-panel) !important;
  color: var(--customer-heading) !important;
  box-shadow: var(--customer-panel-shadow) !important;
  backdrop-filter: blur(22px) saturate(118%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(118%) !important;
  text-align: left !important;
  font-family: inherit !important;
}

html body #jnCustomerServiceRuntime#jnCustomerServiceRuntime#jnCustomerServiceRuntime .replica-customer-modal::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 0 auto !important;
  display: block !important;
  width: auto !important;
  height: 132px !important;
  background: radial-gradient(circle at 24% 16%, rgba(45, 212, 191, .24), transparent 38%), linear-gradient(180deg, rgba(255, 255, 255, .075), transparent) !important;
  opacity: .92 !important;
  pointer-events: none !important;
}

html body #jnCustomerServiceRuntime#jnCustomerServiceRuntime#jnCustomerServiceRuntime .customer-modal-close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  z-index: 2 !important;
  display: block !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--customer-close-bg) !important;
  color: var(--customer-close-text) !important;
  box-shadow: none !important;
  font: inherit !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 30px !important;
  text-align: center !important;
  cursor: pointer !important;
  -webkit-text-fill-color: currentColor !important;
}

html body #jnCustomerServiceRuntime#jnCustomerServiceRuntime#jnCustomerServiceRuntime .customer-modal-close:hover {
  background: var(--customer-close-bg-hover) !important;
}

html body #jnCustomerServiceRuntime#jnCustomerServiceRuntime#jnCustomerServiceRuntime .service-modal-head {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  grid-template-columns: 10px minmax(0, 1fr) !important;
  gap: 12px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 20px 18px 14px !important;
  text-align: left !important;
}

html body #jnCustomerServiceRuntime#jnCustomerServiceRuntime#jnCustomerServiceRuntime .service-status-dot {
  display: block !important;
  width: 10px !important;
  height: 10px !important;
  margin: 10px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #20e36a !important;
  box-shadow: 0 0 0 5px rgba(32, 227, 106, .14), 0 0 16px rgba(32, 227, 106, .72) !important;
}

html body #jnCustomerServiceRuntime#jnCustomerServiceRuntime#jnCustomerServiceRuntime .service-modal-head h2 {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--customer-heading) !important;
  font-size: 21px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  text-align: left !important;
  -webkit-text-fill-color: currentColor !important;
}

html body #jnCustomerServiceRuntime#jnCustomerServiceRuntime#jnCustomerServiceRuntime .service-modal-head p {
  display: block !important;
  margin: 7px 0 0 !important;
  padding: 0 !important;
  color: var(--customer-text) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  text-align: left !important;
  -webkit-text-fill-color: currentColor !important;
}

html body #jnCustomerServiceRuntime#jnCustomerServiceRuntime#jnCustomerServiceRuntime .service-online-card {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-items: center !important;
  justify-items: center !important;
  gap: 8px !important;
  width: auto !important;
  margin: 0 14px 10px !important;
  padding: 12px !important;
  border: 1px solid var(--customer-surface-line) !important;
  border-radius: 14px !important;
  background: var(--customer-surface) !important;
  color: var(--customer-heading) !important;
  box-shadow: 0 14px 32px rgba(24, 24, 26, .10), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
  text-align: center !important;
}

html body #jnCustomerServiceRuntime#jnCustomerServiceRuntime#jnCustomerServiceRuntime .service-avatar.service-avatar-polished {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: 58px !important;
  height: 58px !important;
  margin: 0 !important;
  padding: 7px !important;
  overflow: visible !important;
  border: 1px solid rgba(125, 211, 252, .38) !important;
  border-radius: 18px !important;
  background: radial-gradient(circle at 28% 18%, rgba(153, 246, 228, .40), transparent 42%), linear-gradient(145deg, rgba(39, 39, 42, .96), rgba(13, 148, 136, .72)) !important;
  box-shadow: 0 16px 32px rgba(24, 24, 26, .24), 0 0 0 5px rgba(20, 184, 166, .11), inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}

html body #jnCustomerServiceRuntime#jnCustomerServiceRuntime#jnCustomerServiceRuntime .service-avatar.service-avatar-polished::before {
  content: "" !important;
  position: absolute !important;
  inset: -5px !important;
  z-index: -1 !important;
  display: block !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, rgba(45, 212, 191, .42), rgba(20, 184, 166, .24), rgba(110, 231, 183, .24)) !important;
  opacity: .48 !important;
  filter: blur(8px) !important;
}

html body #jnCustomerServiceRuntime#jnCustomerServiceRuntime#jnCustomerServiceRuntime .service-avatar.service-avatar-polished::after {
  content: "" !important;
  position: absolute !important;
  right: -2px !important;
  bottom: -2px !important;
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  border: 3px solid #3f3f42 !important;
  border-radius: 50% !important;
  background: #22c55e !important;
  box-shadow: 0 0 16px rgba(34, 197, 94, .82) !important;
}

html body #jnCustomerServiceRuntime#jnCustomerServiceRuntime#jnCustomerServiceRuntime .service-avatar.service-avatar-polished img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  object-fit: contain !important;
  filter: drop-shadow(0 8px 14px rgba(24, 24, 26, .28)) !important;
}

html body #jnCustomerServiceRuntime#jnCustomerServiceRuntime#jnCustomerServiceRuntime .service-online-card > div:not(.service-avatar) {
  display: grid !important;
  justify-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
}

html body #jnCustomerServiceRuntime#jnCustomerServiceRuntime#jnCustomerServiceRuntime .service-online-card strong {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--customer-heading) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: normal !important;
  text-align: center !important;
  -webkit-text-fill-color: currentColor !important;
}

html body #jnCustomerServiceRuntime#jnCustomerServiceRuntime#jnCustomerServiceRuntime .service-online-card em {
  display: grid !important;
  place-items: center !important;
  width: auto !important;
  height: 22px !important;
  min-height: 22px !important;
  margin: 2px 0 0 !important;
  padding: 0 12px !important;
  border: 1px solid rgba(32, 227, 106, .28) !important;
  border-radius: 999px !important;
  background: rgba(32, 227, 106, .13) !important;
  color: #9de2c0 !important;
  font-size: 10px !important;
  font-style: normal !important;
  font-weight: 900 !important;
  line-height: normal !important;
  text-align: center !important;
  -webkit-text-fill-color: currentColor !important;
}

html body #jnCustomerServiceRuntime#jnCustomerServiceRuntime#jnCustomerServiceRuntime .service-card.service-qr-card.service-qr-only {
  position: static !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-items: center !important;
  justify-items: center !important;
  gap: 14px !important;
  width: max-content !important;
  max-width: calc(100% - 32px) !important;
  margin: 0 auto 12px !important;
  padding: 12px !important;
  border: 1px solid var(--customer-surface-line) !important;
  border-radius: 18px !important;
  background: var(--customer-surface-soft) !important;
  color: var(--customer-heading) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 16px 36px rgba(24, 24, 26, .12) !important;
  text-align: center !important;
}

html body #jnCustomerServiceRuntime#jnCustomerServiceRuntime#jnCustomerServiceRuntime .service-qr-frame {
  position: static !important;
  display: block !important;
  width: 154px !important;
  height: 154px !important;
  margin: 0 !important;
  padding: 10px !important;
  overflow: visible !important;
  border: 1px solid var(--customer-qr-line) !important;
  border-radius: 16px !important;
  background: var(--customer-qr-shell) !important;
  box-shadow: var(--customer-qr-shadow) !important;
}

html body #jnCustomerServiceRuntime#jnCustomerServiceRuntime#jnCustomerServiceRuntime .service-qr-frame img,
html body #jnCustomerServiceRuntime#jnCustomerServiceRuntime#jnCustomerServiceRuntime .service-qr-frame .customer-qr-fallback {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 8px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #0f9db2 !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
  object-fit: cover !important;
  text-align: center !important;
  -webkit-text-fill-color: currentColor !important;
}

html body #jnCustomerServiceRuntime#jnCustomerServiceRuntime#jnCustomerServiceRuntime .service-actions.service-actions-single {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  width: auto !important;
  margin: 0 !important;
  padding: 2px 18px 18px !important;
}

html body #jnCustomerServiceRuntime#jnCustomerServiceRuntime#jnCustomerServiceRuntime .service-actions.service-actions-single a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--customer-action-line) !important;
  border-radius: 999px !important;
  background: var(--customer-action-bg) !important;
  color: var(--customer-action-text) !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: normal !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  -webkit-text-fill-color: currentColor !important;
}

html body #jnCustomerServiceRuntime#jnCustomerServiceRuntime#jnCustomerServiceRuntime .service-actions.service-actions-single a:hover {
  background: var(--customer-action-bg-hover) !important;
}

html.jn-light-mode body #jnCustomerServiceRuntime#jnCustomerServiceRuntime#jnCustomerServiceRuntime .replica-customer-modal::before,
html[data-theme="light"] body #jnCustomerServiceRuntime#jnCustomerServiceRuntime#jnCustomerServiceRuntime .replica-customer-modal::before,
html body.jn-light-mode #jnCustomerServiceRuntime#jnCustomerServiceRuntime#jnCustomerServiceRuntime .replica-customer-modal::before,
html body[data-theme="light"] #jnCustomerServiceRuntime#jnCustomerServiceRuntime#jnCustomerServiceRuntime .replica-customer-modal::before {
  background: radial-gradient(circle at 24% 16%, rgba(20, 184, 166, .14), transparent 40%), linear-gradient(180deg, rgba(255, 255, 255, .52), transparent) !important;
}

html.jn-light-mode body #jnCustomerServiceRuntime#jnCustomerServiceRuntime#jnCustomerServiceRuntime .service-avatar.service-avatar-polished::after,
html[data-theme="light"] body #jnCustomerServiceRuntime#jnCustomerServiceRuntime#jnCustomerServiceRuntime .service-avatar.service-avatar-polished::after,
html body.jn-light-mode #jnCustomerServiceRuntime#jnCustomerServiceRuntime#jnCustomerServiceRuntime .service-avatar.service-avatar-polished::after,
html body[data-theme="light"] #jnCustomerServiceRuntime#jnCustomerServiceRuntime#jnCustomerServiceRuntime .service-avatar.service-avatar-polished::after {
  border-color: #f7f5f2 !important;
}

html.jn-light-mode body #jnCustomerServiceRuntime#jnCustomerServiceRuntime#jnCustomerServiceRuntime .service-online-card em,
html[data-theme="light"] body #jnCustomerServiceRuntime#jnCustomerServiceRuntime#jnCustomerServiceRuntime .service-online-card em,
html body.jn-light-mode #jnCustomerServiceRuntime#jnCustomerServiceRuntime#jnCustomerServiceRuntime .service-online-card em,
html body[data-theme="light"] #jnCustomerServiceRuntime#jnCustomerServiceRuntime#jnCustomerServiceRuntime .service-online-card em {
  color: #27765e !important;
}

html body #jnCustomerServiceRuntime#jnCustomerServiceRuntime#jnCustomerServiceRuntime .service-actions.service-actions-single a::after {
  content: "" !important;
  display: block !important;
  width: 7px !important;
  height: 7px !important;
  margin: 0 0 0 8px !important;
  padding: 0 !important;
  border: 0 !important;
  border-top: 2px solid currentColor !important;
  border-right: 2px solid currentColor !important;
  transform: rotate(45deg) !important;
}

@media (max-width: 760px) {
  html body #jnCustomerServiceRuntime#jnCustomerServiceRuntime#jnCustomerServiceRuntime .customer-modal-overlay {
    padding: 14px !important;
  }

  html body #jnCustomerServiceRuntime#jnCustomerServiceRuntime#jnCustomerServiceRuntime .customer-modal.replica-customer-modal {
    width: min(300px, calc(100vw - 28px)) !important;
    max-height: calc(100dvh - 28px) !important;
    overflow: auto !important;
  }

  html body #jnCustomerServiceRuntime#jnCustomerServiceRuntime#jnCustomerServiceRuntime .service-qr-frame {
    width: 144px !important;
    height: 144px !important;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html body #jnCustomerServiceRuntime#jnCustomerServiceRuntime#jnCustomerServiceRuntime .customer-modal-overlay {
    animation: jn-customer-overlay-in .18s ease both !important;
  }

  html body #jnCustomerServiceRuntime#jnCustomerServiceRuntime#jnCustomerServiceRuntime .customer-modal.replica-customer-modal {
    animation: jn-customer-modal-in .22s cubic-bezier(.2, .8, .2, 1) both !important;
  }
}

@keyframes jn-customer-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes jn-customer-modal-in {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}