/**
 * 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: rgba(3, 6, 13, .72);
  --customer-panel: linear-gradient(180deg, #091627, #040a15);
  --customer-panel-line: rgba(0, 202, 224, .28);
  --customer-panel-shadow: 0 28px 80px rgba(0, 0, 0, .58), 0 0 42px rgba(0, 202, 224, .08), inset 0 1px 0 rgba(255, 255, 255, .06);
  --customer-heading: #f5fbff;
  --customer-text: rgba(213, 230, 238, .76);
  --customer-surface: rgba(0, 202, 224, .075);
  --customer-surface-soft: rgba(255, 255, 255, .035);
  --customer-surface-line: rgba(125, 211, 252, .16);
  --customer-close-bg: rgba(125, 211, 252, .08);
  --customer-close-bg-hover: rgba(0, 202, 224, .16);
  --customer-close-text: #eaffff;
  --customer-action-bg: linear-gradient(135deg, #00cae0, #009fc7);
  --customer-action-bg-hover: linear-gradient(135deg, #19d8e9, #00add4);
  --customer-action-line: rgba(96, 240, 255, .34);
  --customer-action-text: #ffffff;
  --customer-qr-shell: linear-gradient(180deg, #ffffff, #f1f0ed);
  --customer-qr-line: rgba(125, 211, 252, .24);
  --customer-qr-shadow: 0 14px 32px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .94);
  position: fixed;
  inset: 0;
  z-index: 2147483635;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  margin: 0;
  pointer-events: auto;
  color-scheme: dark;
}

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: rgba(3, 11, 24, .46);
  --customer-panel: linear-gradient(180deg, #ffffff, #f2f8fc);
  --customer-panel-line: rgba(8, 145, 178, .22);
  --customer-panel-shadow: 0 28px 72px rgba(15, 40, 65, .22), 0 0 36px rgba(0, 202, 224, .08), inset 0 1px 0 rgba(255, 255, 255, .96);
  --customer-heading: #0f2638;
  --customer-text: #5b7180;
  --customer-surface: rgba(0, 202, 224, .08);
  --customer-surface-soft: rgba(233, 247, 251, .72);
  --customer-surface-line: rgba(8, 145, 178, .15);
  --customer-close-bg: rgba(8, 145, 178, .08);
  --customer-close-bg-hover: rgba(0, 202, 224, .14);
  --customer-close-text: #245064;
  --customer-action-bg: linear-gradient(135deg, #00b8d4, #0789b5);
  --customer-action-bg-hover: linear-gradient(135deg, #00c8df, #0799c4);
  --customer-action-line: rgba(8, 145, 178, .26);
  --customer-action-text: #ffffff;
  --customer-qr-shell: linear-gradient(180deg, #ffffff, #f4fbfd);
  --customer-qr-line: rgba(8, 145, 178, .14);
  --customer-qr-shadow: 0 12px 26px rgba(15, 40, 65, .14), inset 0 1px 0 rgba(255, 255, 255, .96);
  color-scheme: light;
}

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;
  letter-spacing: 0;
}

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

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

html body #jnCustomerServiceRuntime#jnCustomerServiceRuntime#jnCustomerServiceRuntime .replica-customer-modal::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  display: block;
  width: auto;
  height: 132px;
  background: radial-gradient(circle at 24% 16%, rgba(0, 202, 224, .24), transparent 40%), linear-gradient(180deg, rgba(96, 240, 255, .055), transparent);
  opacity: .92;
  pointer-events: none;
}

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

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

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

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

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

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

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

html body #jnCustomerServiceRuntime#jnCustomerServiceRuntime#jnCustomerServiceRuntime .service-avatar.service-avatar-polished {
  position: relative;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 0;
  padding: 7px;
  overflow: visible;
  border: 1px solid rgba(125, 211, 252, .38);
  border-radius: 18px;
  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));
  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);
}

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

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

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

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

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

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

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

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

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

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

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

html body:not(.public-home) #jnCustomerServiceRuntime#jnCustomerServiceRuntime#jnCustomerServiceRuntime .service-actions.service-actions-single a {
  min-width: 0;
  transition: color .15s cubic-bezier(.16, 1, .3, 1);
}

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

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(0, 184, 212, .14), transparent 40%), linear-gradient(180deg, rgba(255, 255, 255, .52), transparent);
}

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;
}

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;
}

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

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

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

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

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

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

@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); }
}