/* Shared browser compatibility layer. Selectors stay scoped to application shells. */
:root {
  --jn-compat-layout-width: 100vw;
  --jn-compat-layout-height: 100vh;
  --jn-compat-viewport-width: 100vw;
  --jn-compat-viewport-height: 100vh;
  --jn-compat-viewport-top: 0px;
  --jn-compat-viewport-left: 0px;
  --jn-compat-keyboard-height: 0px;
  --jn-compat-safe-top: 0px;
  --jn-compat-safe-right: 0px;
  --jn-compat-safe-bottom: 0px;
  --jn-compat-safe-left: 0px;
}

@supports (height: 100svh) {
  :root { --jn-compat-layout-height: 100svh; --jn-compat-viewport-height: 100svh; }
}
@supports (height: 100dvh) {
  :root { --jn-compat-viewport-height: 100dvh; }
}
@supports (padding-top: constant(safe-area-inset-top)) {
  :root {
    --jn-compat-safe-top: constant(safe-area-inset-top);
    --jn-compat-safe-right: constant(safe-area-inset-right);
    --jn-compat-safe-bottom: constant(safe-area-inset-bottom);
    --jn-compat-safe-left: constant(safe-area-inset-left);
  }
}
@supports (padding-top: env(safe-area-inset-top)) {
  :root {
    --jn-compat-safe-top: env(safe-area-inset-top, 0px);
    --jn-compat-safe-right: env(safe-area-inset-right, 0px);
    --jn-compat-safe-bottom: env(safe-area-inset-bottom, 0px);
    --jn-compat-safe-left: env(safe-area-inset-left, 0px);
  }
}

html, body { max-width: 100%; }
html.jn-browser-compat,
html.jn-browser-compat body { min-height: var(--jn-compat-layout-height, 100vh); }
html.jn-browser-compat body,
html.jn-browser-compat input,
html.jn-browser-compat textarea,
html.jn-browser-compat select,
html.jn-browser-compat button { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

html.jn-browser-compat button,
html.jn-browser-compat [role=button],
html.jn-browser-compat a,
html.jn-browser-compat input[type=button],
html.jn-browser-compat input[type=submit] { touch-action: manipulation; }

html.jn-browser-compat input,
html.jn-browser-compat textarea,
html.jn-browser-compat select { min-width: 0; max-width: 100%; }
html.jn-browser-compat input[type=date],
html.jn-browser-compat input[type=datetime-local],
html.jn-browser-compat input[type=month],
html.jn-browser-compat input[type=time] { box-sizing: border-box; }
html.jn-compat-ios input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
html.jn-compat-ios textarea,
html.jn-compat-ios select { font-size: 16px; }

html.jn-browser-compat .front-home-app,
html.jn-browser-compat [data-front-app-public-root],
html.jn-browser-compat #app,
html.jn-browser-compat .app-wrapper,
html.jn-browser-compat .main-container,
html.jn-browser-compat .app-main,
html.jn-browser-compat .layout-main,
html.jn-browser-compat .content,
html.jn-browser-compat .page-content,
html.jn-browser-compat .el-row > *,
html.jn-browser-compat .el-col,
html.jn-browser-compat .el-form-item__content,
html.jn-browser-compat .el-input,
html.jn-browser-compat .el-select,
html.jn-browser-compat .el-input-number,
html.jn-browser-compat .recharge-v2-shell > *,
html.jn-browser-compat .recharge-v2-pane > *,
html.jn-browser-compat .front-resource-modal > *,
html.jn-browser-compat .record-detail-modal > * { min-width: 0; }

html.jn-browser-compat .table-wrap,
html.jn-browser-compat .table-scroll,
html.jn-browser-compat .admin-table-wrap,
html.jn-browser-compat .records-table-wrap,
html.jn-browser-compat .el-table,
html.jn-browser-compat .el-table__inner-wrapper { max-width: 100%; }
html.jn-browser-compat .table-wrap,
html.jn-browser-compat .table-scroll,
html.jn-browser-compat .admin-table-wrap,
html.jn-browser-compat .records-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}

html.jn-browser-compat .front-home-app img,
html.jn-browser-compat [data-front-app-public-root] img,
html.jn-browser-compat .page-content img,
html.jn-browser-compat .content img,
html.jn-browser-compat .record-detail-modal img,
html.jn-browser-compat .gallery-detail-modal img,
html.jn-browser-compat .el-image img,
html.jn-browser-compat video,
html.jn-browser-compat canvas { max-width: 100%; }
html.jn-browser-compat video,
html.jn-browser-compat canvas { height: auto; }

html.jn-browser-compat .el-table .cell,
html.jn-browser-compat .jn-payment-summary strong,
html.jn-browser-compat .front-ledger-row,
html.jn-browser-compat .jn-credit-row,
html.jn-browser-compat .recharge-v2-notice,
html.jn-browser-compat .recharge-v2-empty,
html.jn-browser-compat .enterprise-alert p { overflow-wrap: break-word; word-break: break-word; }

/* Front fixed layers follow the real visual viewport during keyboard and zoom changes. */
html.jn-browser-compat body:not(.page-admin) .enterprise-alert-layer,
html.jn-browser-compat body:not(.page-admin) .front-creative-confirm-layer,
html.jn-browser-compat body:not(.page-admin) .front-creative-video-confirm-layer,
html.jn-browser-compat body:not(.page-admin) .front-profile-layer,
html.jn-browser-compat body:not(.page-admin) .front-resource-layer,
html.jn-browser-compat body:not(.page-admin) .front-shop-layer,
html.jn-browser-compat body:not(.page-admin) .front-buy-layer,
html.jn-browser-compat body:not(.page-admin) .jn-checkin-layer,
html.jn-browser-compat body:not(.page-admin) .jn-message-layer,
html.jn-browser-compat body:not(.page-admin) .jn-payment-layer,
html.jn-browser-compat body:not(.page-admin) .jn-profile-layer,
html.jn-browser-compat body:not(.page-admin) .jn-resource-layer,
html.jn-browser-compat body:not(.page-admin) .jn-system-notice-layer,
html.jn-browser-compat body:not(.page-admin) .record-detail-layer,
html.jn-browser-compat body:not(.page-admin) .gallery-detail-layer,
html.jn-browser-compat body:not(.page-admin) .ai-video-player-layer,
html.jn-browser-compat body:not(.page-admin) .customer-modal-overlay,
html.jn-browser-compat body:not(.page-admin) .modal-layer {
  box-sizing: border-box;
  top: var(--jn-compat-viewport-top, 0px);
  right: auto;
  bottom: auto;
  left: var(--jn-compat-viewport-left, 0px);
  width: var(--jn-compat-viewport-width, 100vw);
  height: var(--jn-compat-viewport-height, 100vh);
  max-width: var(--jn-compat-viewport-width, 100vw);
  max-height: var(--jn-compat-viewport-height, 100vh);
  padding: calc(8px + var(--jn-compat-safe-top, 0px)) calc(8px + var(--jn-compat-safe-right, 0px)) calc(8px + var(--jn-compat-safe-bottom, 0px)) calc(8px + var(--jn-compat-safe-left, 0px));
  overscroll-behavior: contain;
}

html.jn-browser-compat body:not(.page-admin) .enterprise-alert,
html.jn-browser-compat body:not(.page-admin) .front-profile-modal,
html.jn-browser-compat body:not(.page-admin) .front-resource-modal,
html.jn-browser-compat body:not(.page-admin) .front-shop-modal,
html.jn-browser-compat body:not(.page-admin) .front-ledger-modal,
html.jn-browser-compat body:not(.page-admin) .jn-api-manager-modal,
html.jn-browser-compat body:not(.page-admin) .jn-checkin-modal,
html.jn-browser-compat body:not(.page-admin) .jn-credit-ledger-modal,
html.jn-browser-compat body:not(.page-admin) .jn-message-modal,
html.jn-browser-compat body:not(.page-admin) .jn-payment-panel,
html.jn-browser-compat body:not(.page-admin) .jn-profile-modal,
html.jn-browser-compat body:not(.page-admin) .jn-resource-modal,
html.jn-browser-compat body:not(.page-admin) .jn-system-notice-modal,
html.jn-browser-compat body:not(.page-admin) .record-detail-modal,
html.jn-browser-compat body:not(.page-admin) .gallery-detail-modal,
html.jn-browser-compat body:not(.page-admin) .ai-video-player-panel,
html.jn-browser-compat body:not(.page-admin) .customer-modal {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  max-width: calc(var(--jn-compat-viewport-width, 100vw) - 16px - var(--jn-compat-safe-left, 0px) - var(--jn-compat-safe-right, 0px));
  max-height: calc(var(--jn-compat-viewport-height, 100vh) - 16px - var(--jn-compat-safe-top, 0px) - var(--jn-compat-safe-bottom, 0px));
}

html.jn-browser-compat body:not(.page-admin) .jn-payment-actions {
  flex: 0 0 auto;
  padding-bottom: calc(8px + var(--jn-compat-safe-bottom, 0px));
}

html.jn-browser-compat body:not(.page-admin) .jn-quick-drawer {
  max-height: calc(var(--jn-compat-viewport-height, 100vh) - 12px - var(--jn-compat-safe-top, 0px) - var(--jn-compat-safe-bottom, 0px));
}
html.jn-browser-compat body:not(.page-admin) .jn-quick-drawer-nav,
html.jn-browser-compat body:not(.page-admin) .ai-video-select-popover,
html.jn-browser-compat body:not(.page-admin) .dropdown-menu,
html.jn-browser-compat body:not(.page-admin) [role=listbox] {
  max-height: calc(var(--jn-compat-viewport-height, 100vh) - 32px - var(--jn-compat-safe-top, 0px) - var(--jn-compat-safe-bottom, 0px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Server-rendered admin pages. */
html.jn-browser-compat body.page-admin .admin-modal-layer,
html.jn-browser-compat body.page-admin .admin-profile-layer,
html.jn-browser-compat body.page-admin .chat-detail-layer,
html.jn-browser-compat body.page-admin .dialog-layer,
html.jn-browser-compat body.page-admin .enterprise-alert-layer,
html.jn-browser-compat body.page-admin .gallery-preview-layer,
html.jn-browser-compat body.page-admin .image-preview-layer,
html.jn-browser-compat body.page-admin .modal-layer,
html.jn-browser-compat body.page-admin .record-detail-layer,
html.jn-browser-compat body.page-admin .record-preview-layer,
html.jn-browser-compat body.page-admin .tx-detail-layer {
  box-sizing: border-box;
  top: var(--jn-compat-viewport-top, 0px);
  right: auto;
  bottom: auto;
  left: var(--jn-compat-viewport-left, 0px);
  width: var(--jn-compat-viewport-width, 100vw);
  height: var(--jn-compat-viewport-height, 100vh);
  max-width: var(--jn-compat-viewport-width, 100vw);
  max-height: var(--jn-compat-viewport-height, 100vh);
  padding: calc(8px + var(--jn-compat-safe-top, 0px)) calc(8px + var(--jn-compat-safe-right, 0px)) calc(8px + var(--jn-compat-safe-bottom, 0px)) calc(8px + var(--jn-compat-safe-left, 0px));
  overscroll-behavior: contain;
}

html.jn-browser-compat body.page-admin .admin-code-modal,
html.jn-browser-compat body.page-admin .admin-modal,
html.jn-browser-compat body.page-admin .admin-modal-panel,
html.jn-browser-compat body.page-admin .admin-user-modal,
html.jn-browser-compat body.page-admin .balance-modal,
html.jn-browser-compat body.page-admin .chat-detail-modal,
html.jn-browser-compat body.page-admin .gallery-preview-modal,
html.jn-browser-compat body.page-admin .member-modal,
html.jn-browser-compat body.page-admin .record-detail-modal,
html.jn-browser-compat body.page-admin .record-preview-modal,
html.jn-browser-compat body.page-admin .role-modal,
html.jn-browser-compat body.page-admin .staff-modal {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  max-width: calc(var(--jn-compat-viewport-width, 100vw) - 16px - var(--jn-compat-safe-left, 0px) - var(--jn-compat-safe-right, 0px));
  max-height: calc(var(--jn-compat-viewport-height, 100vh) - 16px - var(--jn-compat-safe-top, 0px) - var(--jn-compat-safe-bottom, 0px));
}

/* Admin SPA Element Plus overlays are scoped by the shell marker. */
html.jn-browser-compat.jn-compat-admin-spa .el-overlay {
  box-sizing: border-box;
  top: var(--jn-compat-viewport-top, 0px);
  right: auto;
  bottom: auto;
  left: var(--jn-compat-viewport-left, 0px);
  width: var(--jn-compat-viewport-width, 100vw);
  height: var(--jn-compat-viewport-height, 100vh);
  max-width: var(--jn-compat-viewport-width, 100vw);
  max-height: var(--jn-compat-viewport-height, 100vh);
  padding: calc(8px + var(--jn-compat-safe-top, 0px)) calc(8px + var(--jn-compat-safe-right, 0px)) calc(8px + var(--jn-compat-safe-bottom, 0px)) calc(8px + var(--jn-compat-safe-left, 0px));
  overflow: hidden;
  overscroll-behavior: contain;
}

html.jn-browser-compat.jn-compat-admin-spa .el-dialog,
html.jn-browser-compat.jn-compat-admin-spa .ai-model-solid-dialog,
html.jn-browser-compat.jn-compat-admin-spa .ai-model-dialog {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  max-width: calc(var(--jn-compat-viewport-width, 100vw) - 16px - var(--jn-compat-safe-left, 0px) - var(--jn-compat-safe-right, 0px));
  max-height: calc(var(--jn-compat-viewport-height, 100vh) - 16px - var(--jn-compat-safe-top, 0px) - var(--jn-compat-safe-bottom, 0px));
}

html.jn-browser-compat.jn-compat-admin-spa .el-message-box {
  box-sizing: border-box;
  width: var(--el-messagebox-width, 420px);
  min-width: 0;
  min-height: 0;
  max-width: calc(var(--jn-compat-viewport-width, 100vw) - 16px - var(--jn-compat-safe-left, 0px) - var(--jn-compat-safe-right, 0px));
  max-height: calc(var(--jn-compat-viewport-height, 100vh) - 16px - var(--jn-compat-safe-top, 0px) - var(--jn-compat-safe-bottom, 0px));
}

html.jn-browser-compat.jn-compat-admin-spa .el-drawer,
html.jn-browser-compat.jn-compat-admin-spa .el-drawer__body,
html.jn-browser-compat.jn-compat-admin-spa .el-dialog__body,
html.jn-browser-compat.jn-compat-admin-spa .el-message-box__content { min-width: 0; min-height: 0; }

html.jn-browser-compat.jn-compat-admin-spa .el-popper,
html.jn-browser-compat.jn-compat-admin-spa .el-select__popper,
html.jn-browser-compat.jn-compat-admin-spa .el-picker__popper,
html.jn-browser-compat.jn-compat-admin-spa .model-frame-popover,
html.jn-browser-compat.jn-compat-admin-spa .admin-users-popover {
  box-sizing: border-box;
  max-width: calc(var(--jn-compat-viewport-width, 100vw) - 16px);
  max-height: calc(var(--jn-compat-viewport-height, 100vh) - 24px - var(--jn-compat-safe-top, 0px) - var(--jn-compat-safe-bottom, 0px));
}

html.jn-browser-compat.jn-compat-admin-spa .el-select-dropdown,
html.jn-browser-compat.jn-compat-admin-spa .el-picker-panel,
html.jn-browser-compat.jn-compat-admin-spa .el-dropdown-menu,
html.jn-browser-compat.jn-compat-admin-spa .el-popper .el-scrollbar__wrap {
  max-height: calc(var(--jn-compat-viewport-height, 100vh) - 40px - var(--jn-compat-safe-top, 0px) - var(--jn-compat-safe-bottom, 0px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

html.jn-browser-compat.jn-compat-admin-spa .el-upload,
html.jn-browser-compat.jn-compat-admin-spa .el-upload-dragger,
html.jn-browser-compat body.page-admin .upload-box,
html.jn-browser-compat body.page-admin .upload-dropzone {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}

html.jn-browser-compat.jn-no-sticky .jn-profile-top,
html.jn-browser-compat.jn-no-sticky .jn-payment-head,
html.jn-browser-compat.jn-no-sticky .jn-message-head,
html.jn-browser-compat.jn-no-sticky .recharge-v2-head,
html.jn-browser-compat.jn-no-sticky .el-dialog__header,
html.jn-browser-compat.jn-no-sticky .el-drawer__header { position: relative; top: auto; }

html.jn-browser-compat.jn-no-backdrop-filter .enterprise-alert-layer,
html.jn-browser-compat.jn-no-backdrop-filter .customer-modal-overlay,
html.jn-browser-compat.jn-no-backdrop-filter .front-resource-layer,
html.jn-browser-compat.jn-no-backdrop-filter .jn-resource-layer,
html.jn-browser-compat.jn-no-backdrop-filter .recharge-v2-layer,
html.jn-browser-compat.jn-no-backdrop-filter .el-overlay {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

@media (max-width: 900px), (max-height: 680px) {
  html.jn-browser-compat.jn-compat-admin-spa .el-dialog,
  html.jn-browser-compat.jn-compat-admin-spa .ai-model-solid-dialog,
  html.jn-browser-compat.jn-compat-admin-spa .ai-model-dialog {
    display: flex;
    flex-direction: column;
    width: auto;
    min-width: 0;
    overflow: hidden;
  }

  html.jn-browser-compat.jn-compat-admin-spa .el-dialog__header,
  html.jn-browser-compat.jn-compat-admin-spa .el-dialog__footer,
  html.jn-browser-compat.jn-compat-admin-spa .el-drawer__header,
  html.jn-browser-compat.jn-compat-admin-spa .el-drawer__footer { flex: 0 0 auto; }

  html.jn-browser-compat.jn-compat-admin-spa .el-dialog__body,
  html.jn-browser-compat.jn-compat-admin-spa .el-drawer__body {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y pinch-zoom;
    overscroll-behavior: contain;
  }

  html.jn-browser-compat .el-date-editor,
  html.jn-browser-compat .el-date-editor.el-input,
  html.jn-browser-compat .el-date-editor.el-input__wrapper,
  html.jn-browser-compat .el-select,
  html.jn-browser-compat .el-input-number { width: 100%; max-width: 100%; }

  html.jn-browser-compat .el-dialog__footer button,
  html.jn-browser-compat .el-message-box__btns button,
  html.jn-browser-compat .jn-payment-actions button { min-width: 0; max-width: 100%; }
}

@media (max-width: 760px), (max-height: 680px) {
  html.jn-browser-compat body:not(.page-admin) .jn-auth-modal input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
  html.jn-browser-compat body:not(.page-admin) .replica-login-modal input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]) {
    font-size: 16px !important;
  }

  html.jn-browser-compat body:not(.page-admin) [data-front-app-public-root] .recharge-v2-layer {
    top: var(--jn-compat-viewport-top, 0px) !important;
    right: auto !important;
    bottom: auto !important;
    left: var(--jn-compat-viewport-left, 0px) !important;
    width: var(--jn-compat-viewport-width, 100vw) !important;
    height: var(--jn-compat-viewport-height, 100vh) !important;
    box-sizing: border-box !important;
    padding: calc(8px + var(--jn-compat-safe-top, 0px)) calc(8px + var(--jn-compat-safe-right, 0px)) calc(8px + var(--jn-compat-safe-bottom, 0px)) calc(8px + var(--jn-compat-safe-left, 0px)) !important;
    overflow: hidden !important;
    touch-action: auto !important;
  }

  html.jn-browser-compat body:not(.page-admin) [data-front-app-public-root] .recharge-v2-modal {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
  }

  html.jn-browser-compat body:not(.page-admin) [data-front-app-public-root] .recharge-v2-shell {
    min-height: 0 !important;
    overflow: hidden !important;
  }

  html.jn-browser-compat body:not(.page-admin) [data-front-app-public-root] .recharge-v2-scroll {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    touch-action: pan-y pinch-zoom !important;
    overscroll-behavior: contain;
  }

  html.jn-browser-compat body:not(.page-admin) [data-front-app-public-root] .recharge-v2-scroll::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }

  html.jn-browser-compat body:not(.page-admin) [data-front-app-public-root] .recharge-v2-pane {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    padding-bottom: calc(24px + var(--jn-compat-safe-bottom, 0px)) !important;
  }

  html.jn-browser-compat.jn-compat-keyboard-open body:not(.page-admin) .jn-payment-layer,
  html.jn-browser-compat.jn-compat-keyboard-open body:not(.page-admin) .jn-profile-layer,
  html.jn-browser-compat.jn-compat-keyboard-open body:not(.page-admin) .front-profile-layer,
  html.jn-browser-compat.jn-compat-keyboard-open body:not(.page-admin) .front-resource-layer,
  html.jn-browser-compat.jn-compat-keyboard-open body:not(.page-admin) .jn-resource-layer { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html.jn-browser-compat *,
  html.jn-browser-compat *::before,
  html.jn-browser-compat *::after { scroll-behavior: auto !important; }
}