/* Framework7-inspired controls, scoped to PinkTalk's existing app chrome. */
:root {
  --pt-native-press: rgba(127, 127, 139, .13);
  --pt-native-selected: rgba(127, 127, 139, .09);
  --pt-native-ease: cubic-bezier(.22, .78, .2, 1);
}

.pt-native-back-preview {
  position: fixed;
  left: env(safe-area-inset-left, 0px);
  z-index: 79;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(127, 127, 139, .24);
  border-radius: 50%;
  background: var(--background, #fff);
  color: var(--foreground, #242428);
  box-shadow: 0 3px 12px rgba(0, 0, 0, .09);
  pointer-events: none;
  contain: layout paint;
  will-change: transform, opacity;
}
.pt-native-back-preview[data-ready="true"] {
  border-color: currentColor;
}
.pt-native-back-preview svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 1023px) {
  body.app-body .mobile-navigation .app-navigation-link,
  body.app-body .mobile-navigation .pt-compose-action,
  body.pg-body .pg-bottom a,
  body.pg-body .pg-bottom button {
    min-height: 44px;
    min-width: 44px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
  }
  body.app-body .mobile-navigation .mobile-nav-icon {
    border-radius: 14px;
    transition: transform 130ms var(--pt-native-ease), background-color 130ms ease, color 130ms ease;
  }
  body.app-body .mobile-navigation .app-navigation-link[data-active="true"] .mobile-nav-icon {
    background-color: var(--pt-native-selected);
  }
  body.app-body .mobile-navigation .app-navigation-link[data-pt-native-pressed="true"] .mobile-nav-icon,
  body.app-body .mobile-navigation .app-navigation-link:active .mobile-nav-icon {
    transform: scale(.9);
    background-color: var(--pt-native-press);
  }
  body.app-body .mobile-navigation .pt-compose-action,
  body.pg-body .pg-bottom a svg,
  body.pg-body .pg-bottom button svg {
    transition: transform 130ms var(--pt-native-ease), opacity 130ms ease;
  }
  body.app-body .mobile-navigation .pt-compose-action[data-pt-native-pressed="true"],
  body.app-body .mobile-navigation .pt-compose-action:active,
  body.pg-body .pg-bottom [data-pt-native-pressed="true"] svg,
  body.pg-body .pg-bottom a:active svg {
    transform: scale(.92);
  }
  body.app-body .mobile-navigation .app-navigation-link:focus-visible,
  body.app-body .mobile-navigation .pt-compose-action:focus-visible,
  body.pg-body .pg-bottom a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }
  /* Keep each existing sheet's direction, focus owner and contents. */
  body.app-body [data-slot="sheet-content"][data-state="open"] {
    animation-duration: 220ms !important;
    transition-duration: 220ms !important;
  }
  body.app-body [data-slot="sheet-content"][data-state="closed"] {
    animation-duration: 170ms !important;
    transition-duration: 170ms !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.app-body .mobile-navigation .mobile-nav-icon,
  body.app-body .mobile-navigation .pt-compose-action,
  body.pg-body .pg-bottom a svg,
  body.pg-body .pg-bottom button svg {
    transition: none !important;
    transform: none !important;
  }
  body.app-body [data-slot="sheet-content"] {
    animation: none !important;
    transition: none !important;
  }
}

@media (forced-colors: active) {
  .pt-native-back-preview { border: 2px solid CanvasText; background: Canvas; color: CanvasText; }
  .app-navigation-link[aria-current="page"] .mobile-nav-icon { outline: 1px solid currentColor; }
}

/* Only explicit, currently eligible sheet headings own the vertical gesture. */
[data-pt-native-sheet-grip] {
  touch-action: pan-x pinch-zoom;
  cursor: grab;
}

[data-pt-native-sheet-grip][data-pt-native-sheet-dragging] {
  cursor: grabbing;
  -webkit-user-select: none;
  user-select: none;
}

/* Individual translate adds to component-owned transforms without replacing them. */
[data-pt-native-sheet][data-pt-native-sheet-moving] {
  translate: 0 var(--pt-native-sheet-offset, 0px);
  transition-property: none !important;
  will-change: translate;
}

.pt-action-sheet[data-pt-native-sheet="share"] > .pt-sheet-heading,
[data-pt-native-sheet="primary-share"] > [data-slot="dialog-header"][data-pt-native-sheet-grip],
[data-pt-native-sheet="radix"] > [data-slot="sheet-header"][data-pt-native-sheet-grip] {
  position: relative;
  box-sizing: border-box;
  min-height: 58px;
  padding-top: 14px;
}

.pt-action-sheet[data-pt-native-sheet="share"] > .pt-sheet-heading::before,
[data-pt-native-sheet="primary-share"] > [data-slot="dialog-header"][data-pt-native-sheet-grip]::before,
[data-pt-native-sheet="radix"] > [data-slot="sheet-header"][data-pt-native-sheet-grip]::before {
  content: "";
  position: absolute;
  inset-block-start: 1px;
  left: calc(50% - 16px);
  width: 32px;
  height: 4px;
  border-radius: 999px;
  background: #d1d1d6;
  pointer-events: none;
}

/* Groups already has its own grip, 88px heading, safe area, and sticky position. */
#pt-group-dialog[data-pt-native-sheet="group"] > .pg-dialog-head[data-pt-native-sheet-grip] {
  touch-action: pan-x pinch-zoom;
}

/* The main home feed uses this specific Radix share dialog. Its portal, focus
   trap, copy operation and dismissal stay owned by the original component. */
@media (max-width: 639px) {
  body.app-body .native-share-dialog.site-dialog-content[data-slot="dialog-content"][role="dialog"] {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 12px;
    margin-inline: auto;
    width: calc(100% - 24px);
    max-width: 420px;
    max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px));
    padding: 12px 16px max(16px, env(safe-area-inset-bottom, 0px));
    border-radius: 20px;
    /* Neutralize the center-position and zoom transforms from the original
       dialog utility classes; its enter/exit opacity animation still runs. */
    translate: 0 var(--pt-native-sheet-offset, 0px) !important;
    transform: none !important;
    animation-duration: 160ms;
  }
}

@media (prefers-contrast: more) {
  .pt-action-sheet[data-pt-native-sheet="share"] > .pt-sheet-heading::before,
  [data-pt-native-sheet="primary-share"] > [data-slot="dialog-header"][data-pt-native-sheet-grip]::before,
  [data-pt-native-sheet="radix"] > [data-slot="sheet-header"][data-pt-native-sheet-grip]::before {
    background: #76767c;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Drag follows direct input; JS snaps back immediately instead of springing. */
  [data-pt-native-sheet][data-pt-native-sheet-moving] { transition: none !important; }
  body.app-body .native-share-dialog.site-dialog-content[data-slot="dialog-content"][role="dialog"] { animation-duration: 0.01ms; }
}

/* Two existing Activity owners become mobile sheets. Their dialogs, portal,
   close buttons, history, focus restoration and list operations remain intact. */
@media (max-width: 639px) {
  body.app-body .site-dialog-content[data-slot="dialog-content"][role="dialog"]:is(.pt-activity-tool-dialog[data-tool="achievements"], .pt-account-management-dialog) {
    position: fixed;
    top: auto !important;
    left: 0;
    right: 0;
    bottom: 12px;
    margin-inline: auto;
    width: calc(100% - 24px);
    max-width: 440px;
    max-height: min(640px, 78dvh) !important;
    padding-bottom: max(14px, env(safe-area-inset-bottom, 0px));
    border-radius: 20px;
    overflow: hidden;
    /* Cancel only this center-position/zoom presentation. Radix still owns
       opacity entry/exit, nested-layer hiding and all modal lifecycle effects. */
    translate: 0 var(--pt-native-sheet-offset, 0px) !important;
    transform: none !important;
    animation-duration: 160ms;
  }

  body.app-body .site-dialog-content[data-slot="dialog-content"][role="dialog"]:is(.pt-activity-tool-dialog[data-tool="achievements"], .pt-account-management-dialog) > [data-slot="dialog-header"] {
    position: relative;
    box-sizing: border-box;
    flex: 0 0 auto;
    min-height: 58px;
    padding-top: 14px;
  }

  body.app-body .site-dialog-content[data-slot="dialog-content"][role="dialog"]:is(.pt-activity-tool-dialog[data-tool="achievements"], .pt-account-management-dialog) > [data-slot="dialog-header"][data-pt-native-sheet-grip]::before {
    content: "";
    position: absolute;
    inset-block-start: 1px;
    left: calc(50% - 16px);
    width: 32px;
    height: 4px;
    border-radius: 999px;
    background: #d1d1d6;
    pointer-events: none;
  }

  body.app-body .site-dialog-content[data-slot="dialog-content"][role="dialog"]:is(.pt-activity-tool-dialog[data-tool="achievements"], .pt-account-management-dialog) > :is(.pt-activity-tool-body, .pt-account-management-body) {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y pinch-zoom;
  }
}

@media (prefers-contrast: more) {
  [data-pt-native-sheet="achievements"] > [data-pt-native-sheet-grip]::before,
  [data-pt-native-sheet="account-management"] > [data-pt-native-sheet-grip]::before { background: #76767c !important; }
}

@media (prefers-reduced-motion: reduce) {
  body.app-body .site-dialog-content[data-slot="dialog-content"][role="dialog"]:is(.pt-activity-tool-dialog[data-tool="achievements"], .pt-account-management-dialog) { animation-duration: 0.01ms; }
}

/* Activity achievements: connect text on the dark panel surface to the existing
   darkcalm palette. The app selects that palette with prefers-color-scheme.
   Keep badge cards, artwork, selected outlines and disabled states unchanged. */
@media (prefers-color-scheme: dark) {
  body.app-body [data-slot="dialog-content"].pt-activity-tool-dialog.pt-play-tool[data-tool="achievements"] .pt-premium-achievements :is(
    .activity-statistics dd,
    .pt-badge-collection-heading h3,
    .activity-next-badge strong,
    .pt-badge-criteria dt,
    .pt-badge-criteria > summary,
    .activity-history-details > summary,
    .activity-achievements-heading h2
  ) {
    color: var(--pt-play-ink, #f1f1f3) !important;
  }

  body.app-body [data-slot="dialog-content"].pt-activity-tool-dialog.pt-play-tool[data-tool="achievements"] .pt-premium-achievements :is(
    .activity-statistics dt,
    .pt-badge-collection-count,
    .activity-badge-help,
    .activity-next-badge > div:first-child,
    .pt-badge-progress-number,
    .pt-badge-criteria dd,
    .activity-week-copy,
    .activity-counting-note,
    .pt-week-count,
    .pt-badge-clear:not(:disabled)
  ) {
    color: var(--muted-foreground, #a8a8b0) !important;
  }
}

/* PinkTalk App Feel 4: retain the existing Vaul drawer as the scroll owner.
 * The menu list clips its rounded surface with overflow:hidden. It must not
 * flex-shrink inside the viewport-limited drawer, or its final actions clip.
 * These are the exact direct children emitted by ResponsiveActionMenu.
 */
body.app-body .native-action-sheet[data-slot="drawer-content"] > .ios-sheet-heading,
body.app-body .native-action-sheet[data-slot="drawer-content"] > .native-action-list,
body.app-body .native-action-sheet[data-slot="drawer-content"] > .pt-save-menu-notice,
body.app-body .native-action-sheet[data-slot="drawer-content"] > p[role="alert"] {
  flex-shrink: 0;
}