/* Mobile-only signing ergonomics for zSign's recipientSignPdf routes.
   Runtime JS adds the zsign-* marker classes; desktop OpenSign stays untouched. */

@media (max-width: 767px) {
  html.zsign-signing-view,
  html.zsign-signing-view body {
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
  }

  .zsign-signing-view .zsign-recipient-shell {
    width: 100% !important;
    min-width: 0 !important;
    height: 100dvh !important;
    min-height: 100svh !important;
    overflow: hidden !important;
  }

  .zsign-signing-view .zsign-document-column {
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    margin-right: 0 !important;
  }

  .zsign-signing-view .zsign-document-main {
    display: flex !important;
    flex: 1 1 auto;
    flex-direction: column;
    width: 100% !important;
    min-width: 0;
    min-height: 0;
  }

  .zsign-signing-view .zsign-document-toolbar {
    position: relative;
    z-index: 30;
    flex: 0 0 auto;
    width: 100%;
    padding: 0 !important;
    background: color-mix(in srgb, hsl(var(--b1, 0 0% 100%)) 94%, transparent);
    border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent);
    box-shadow: 0 4px 18px rgb(15 23 42 / 8%);
    backdrop-filter: blur(12px);
  }

  .zsign-signing-view .zsign-toolbar-row {
    display: grid !important;
    grid-template-columns: minmax(76px, 1fr) auto;
    gap: 8px;
    width: 100% !important;
    min-height: 56px;
    padding: max(6px, env(safe-area-inset-top)) 10px 6px !important;
  }

  .zsign-signing-view .zsign-toolbar-leading {
    display: none !important;
  }

  .zsign-signing-view .zsign-page-status,
  .zsign-signing-view .zsign-action-group {
    min-width: 0;
  }

  .zsign-signing-view .zsign-page-status {
    justify-content: flex-start;
    font-variant-numeric: tabular-nums;
  }

  .zsign-signing-view .zsign-action-group {
    justify-content: flex-end !important;
    gap: 2px;
  }

  .zsign-signing-view .zsign-document-toolbar button,
  .zsign-signing-view .zsign-action-control,
  .zsign-signing-view .zsign-mobile-status-toggle,
  .zsign-signing-view .zsign-mobile-status-close,
  .zsign-signing-view .zsign-error-retry {
    min-width: 44px !important;
    min-height: 44px !important;
    touch-action: manipulation;
  }

  .zsign-signing-view .zsign-document-scroll {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: auto !important;
    overscroll-behavior: contain;
    scroll-padding-bottom: calc(88px + env(safe-area-inset-bottom));
  }

  .zsign-signing-view .zsign-participants-panel {
    position: fixed !important;
    inset: auto 0 0 0;
    z-index: 461;
    display: none !important;
    width: 100% !important;
    max-height: min(62dvh, 34rem);
    padding: 14px 14px calc(18px + env(safe-area-inset-bottom));
    overflow-y: auto !important;
    background: hsl(var(--b1, 0 0% 100%));
    border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -20px 50px rgb(15 23 42 / 24%);
  }

  .zsign-signing-view .zsign-recipient-shell[data-mobile-status-open="true"] .zsign-participants-panel {
    display: block !important;
  }

  .zsign-signing-view .zsign-mobile-status-toggle {
    position: fixed;
    right: max(14px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
    z-index: 455;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    max-width: calc(100vw - 28px);
    padding: 10px 16px;
    color: #fff;
    font: 700 0.875rem/1.2 system-ui, sans-serif;
    background: #123d7a;
    border: 0;
    border-radius: 999px;
    box-shadow: 0 12px 32px rgb(15 23 42 / 28%);
  }

  .zsign-signing-view .zsign-mobile-status-close {
    position: sticky;
    top: 0;
    float: right;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    background: hsl(var(--b2, 0 0% 96%));
    border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
    border-radius: 12px;
  }

  .zsign-signing-view .zsign-mobile-status-backdrop {
    position: fixed;
    inset: 0;
    z-index: 460;
    display: none;
    background: rgb(15 23 42 / 48%);
  }

  .zsign-signing-view .zsign-recipient-shell[data-mobile-status-open="true"] + .zsign-mobile-status-backdrop {
    display: block;
  }

  .zsign-signing-view .op-modal.op-modal-open {
    position: fixed !important;
    inset: 0;
    align-items: center;
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    overflow-y: auto;
  }

  .zsign-signing-view .op-modal.op-modal-open .op-modal-box {
    width: min(100%, 36rem) !important;
    max-width: none !important;
    max-height: calc(100dvh - 24px);
    margin: auto;
    padding: clamp(16px, 5vw, 24px) !important;
    border-radius: 18px;
  }

  .zsign-signing-view .op-modal.op-modal-open .text-\[11px\] {
    font-size: 0.9375rem !important;
    line-height: 1.5 !important;
  }

  .zsign-signing-view .op-modal.op-modal-open button {
    min-height: 48px !important;
    white-space: normal;
  }

  .zsign-signing-view .react-pdf__message--error,
  .zsign-signing-view .react-pdf__message--loading {
    box-sizing: border-box;
    width: min(calc(100% - 24px), 34rem) !important;
    min-height: 0 !important;
    margin: 24px auto;
    padding: 20px;
    color: #172033;
    background: #fff;
    border: 1px solid #d7deea;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgb(15 23 42 / 10%);
    font: 500 0.9375rem/1.5 system-ui, sans-serif;
  }

  .zsign-signing-view .react-pdf__message--error p {
    width: auto !important;
    margin: 0 !important;
  }

  .zsign-signing-view .zsign-error-note {
    margin: 10px 0 0;
    color: #475569;
    font-size: 0.8125rem;
  }

  .zsign-signing-view .zsign-error-retry {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 14px;
    padding: 10px 16px;
    color: #fff;
    font-weight: 750;
    background: #123d7a;
    border: 0;
    border-radius: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zsign-signing-view *,
  .zsign-signing-view *::before,
  .zsign-signing-view *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* OpenSign hides the signer list below md; the mobile bottom sheet is its
   deliberate replacement and must expose that same read-only status content. */
@media (max-width: 767px) {
  .zsign-signing-view .zsign-recipient-shell[data-mobile-status-open="true"] .zsign-participants-panel > .max-h-screen > .hidden {
    display: block !important;
  }
}