/*
 * Unified modal and sheet presentation
 *
 * Loaded after every theme and feature stylesheet so the visible chrome and
 * motion no longer depend on feature-specific cascade order.
 */

:root {
  --community-sheet-open-duration: 320ms;
  --community-sheet-close-duration: 260ms;
  --community-sheet-scrim-open-duration: 180ms;
  --community-sheet-open-easing: cubic-bezier(0.22, 0.82, 0.24, 1);
  --community-sheet-close-easing: cubic-bezier(0.4, 0, 0.8, 0.2);
}

:is(#communityDetailModal, #communityCommentsModal) {
  opacity: 0;
  transition:
    opacity var(--community-sheet-close-duration) ease,
    background-color var(--community-sheet-close-duration) ease;
}

:is(#communityDetailModal, #communityCommentsModal).is-open {
  opacity: 1;
  transition-duration: var(--community-sheet-scrim-open-duration);
}

:is(
  #communityDetailModal .community-detail-panel,
  #communityCommentsModal .community-comments-panel
) {
  transition:
    transform
    var(--community-sheet-close-duration)
    var(--community-sheet-close-easing);
}

:is(
  #communityDetailModal.is-open .community-detail-panel,
  #communityCommentsModal.is-open .community-comments-panel
) {
  transition-duration: var(--community-sheet-open-duration);
  transition-timing-function: var(--community-sheet-open-easing);
}

:is(
  #communityDetailModal.is-open.is-sheet-dragging .community-detail-panel,
  #communityCommentsModal.is-open.is-sheet-dragging .community-comments-panel
) {
  transform: translate3d(0, var(--community-sheet-drag-y, 0px), 0);
  transition: none;
}

:is(
  #communityDetailModal.is-open.is-sheet-drag-releasing .community-detail-panel,
  #communityCommentsModal.is-open.is-sheet-drag-releasing .community-comments-panel
) {
  transform: translate3d(0, var(--community-sheet-drag-y, 0px), 0);
  transition:
    transform
    var(--community-sheet-release-duration, 220ms)
    var(--community-sheet-open-easing);
}

:is(
  #communityDetailModal.is-sheet-closing,
  #communityCommentsModal.is-sheet-closing
) {
  pointer-events: none;
}

@media (max-width: 1024px), (max-width: 1366px) and (any-pointer: coarse) {
  html[data-theme^="glass-"] {
    --sheet-system-radius: 28px;
    --sheet-system-dialog-radius: 24px;
    --sheet-system-surface: var(--theme-surface, var(--surface, #ffffff));
    --sheet-system-line: var(--theme-line, var(--line, #d8e1dd));
    --sheet-system-ink: var(--theme-ink, var(--ink, #1b2923));
    --sheet-system-scrim: rgba(8, 18, 24, 0.48);
    --sheet-system-shadow: 0 -18px 58px rgba(7, 20, 29, 0.22);
    --sheet-system-dialog-shadow: 0 24px 72px rgba(7, 20, 29, 0.24);
    --sheet-system-open-duration: var(--community-sheet-open-duration);
    --sheet-system-close-duration: var(--community-sheet-close-duration);
    --sheet-system-scrim-open-duration: var(--community-sheet-scrim-open-duration);
    --sheet-system-open-easing: var(--community-sheet-open-easing);
    --sheet-system-close-easing: var(--community-sheet-close-easing);
  }

  /*
   * Content sheets share one anchored frame. Their backdrop fades separately
   * from the panel so opening and closing stay calm even on tall content.
   */
  html[data-theme^="glass-"]:root body :is(
    .profile-edit-backdrop,
    #feedbackModal,
    .food-selection-backdrop,
    .manual-food-backdrop,
    .quick-weight-backdrop,
    .policy-backdrop,
    .notification-backdrop,
    .ai-summary-backdrop,
    .community-detail-backdrop,
    .community-comments-backdrop
  ) {
    align-items: end;
    justify-items: stretch;
    padding-top: var(--modal-safe-top-gap);
    background-color: var(--sheet-system-scrim);
    opacity: 0;
    -webkit-backdrop-filter: blur(8px) saturate(0.96);
    backdrop-filter: blur(8px) saturate(0.96);
    transition:
      opacity var(--sheet-system-close-duration) ease,
      background-color var(--sheet-system-close-duration) ease;
  }

  html[data-theme^="glass-"]:root body :is(
    .profile-edit-backdrop,
    #feedbackModal,
    .food-selection-backdrop,
    .manual-food-backdrop,
    .quick-weight-backdrop,
    .policy-backdrop,
    .notification-backdrop,
    .ai-summary-backdrop,
    .community-detail-backdrop,
    .community-comments-backdrop
  ).is-open {
    background-color: var(--sheet-system-scrim);
    opacity: 1;
    transition-duration: var(--sheet-system-scrim-open-duration);
  }

  html[data-theme^="glass-"]:root body :is(
    .profile-edit-dialog,
    #feedbackModal .feedback-dialog,
    .food-selection-dialog,
    .manual-food-dialog,
    .quick-weight-dialog,
    .policy-panel,
    .notification-panel,
    .ai-summary-panel,
    .community-detail-panel,
    .community-comments-panel
  ) {
    box-sizing: border-box;
    border: 1px solid var(--sheet-system-line);
    border-bottom: 0;
    border-radius: var(--sheet-system-radius) var(--sheet-system-radius) 0 0;
    background: var(--sheet-system-surface);
    color: var(--sheet-system-ink);
    box-shadow: var(--sheet-system-shadow);
    opacity: 1;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    backface-visibility: hidden;
    transform: translate3d(0, 104%, 0);
    transition:
      transform var(--sheet-system-close-duration) var(--sheet-system-close-easing);
    will-change: transform;
  }

  html[data-theme^="glass-"]:root body :is(
    .profile-edit-backdrop.is-open .profile-edit-dialog,
    #feedbackModal.is-open .feedback-dialog,
    .food-selection-backdrop.is-open .food-selection-dialog,
    .manual-food-backdrop.is-open .manual-food-dialog,
    .quick-weight-backdrop.is-open .quick-weight-dialog,
    .policy-backdrop.is-open .policy-panel,
    .notification-backdrop.is-open .notification-panel,
    .ai-summary-backdrop.is-open .ai-summary-panel,
    .community-detail-backdrop.is-open .community-detail-panel,
    .community-comments-backdrop.is-open .community-comments-panel
  ) {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-duration: var(--sheet-system-open-duration);
    transition-timing-function: var(--sheet-system-open-easing);
  }

  /*
   * Interactive community sheets keep the scrim on an independent layer.
   * That lets pointer progress and release physics fade the scrim/blur without
   * changing the opacity of the travelling panel itself.
   */
  html[data-theme^="glass-"]:root body :is(
    #communityDetailModal,
    #communityCommentsModal
  ) {
    isolation: isolate;
    background-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  html[data-theme^="glass-"]:root body :is(
    #communityDetailModal,
    #communityCommentsModal
  )::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: var(--sheet-system-scrim);
    opacity: var(--community-sheet-scrim-opacity, 1);
    -webkit-backdrop-filter: blur(8px) saturate(0.96);
    backdrop-filter: blur(8px) saturate(0.96);
    transition: opacity var(--sheet-system-close-duration) ease;
  }

  html[data-theme^="glass-"]:root body :is(
    #communityDetailModal .community-detail-panel,
    #communityCommentsModal .community-comments-panel
  ) {
    position: relative;
    z-index: 1;
  }

  /*
   * Community detail and comments already have interactive drag controllers.
   * Keep these states in the final cascade layer so the generic open transform
   * cannot pin the panel in place while the pointer is moving.
   */
  html[data-theme^="glass-"]:root body :is(
    #communityDetailModal.is-open.is-sheet-dragging .community-detail-panel,
    #communityCommentsModal.is-open.is-sheet-dragging .community-comments-panel
  ) {
    transform: translate3d(0, var(--community-sheet-drag-y, 0px), 0);
    transition: none;
  }

  html[data-theme^="glass-"]:root body :is(
    #communityDetailModal.is-open.is-sheet-dragging,
    #communityCommentsModal.is-open.is-sheet-dragging
  ) {
    transition: none;
  }

  html[data-theme^="glass-"]:root body :is(
    #communityDetailModal.is-open.is-sheet-dragging,
    #communityCommentsModal.is-open.is-sheet-dragging
  )::before {
    transition: none;
  }

  html[data-theme^="glass-"]:root body :is(
    #communityDetailModal.is-open.is-sheet-drag-releasing .community-detail-panel,
    #communityCommentsModal.is-open.is-sheet-drag-releasing .community-comments-panel
  ) {
    transform: translate3d(0, var(--community-sheet-drag-y, 0px), 0);
    transition: transform var(--community-sheet-release-duration, 220ms) var(--sheet-system-open-easing);
  }

  html[data-theme^="glass-"]:root body :is(
    #communityDetailModal.is-open.is-sheet-drag-releasing,
    #communityCommentsModal.is-open.is-sheet-drag-releasing
  ) {
    transition: none;
  }

  html[data-theme^="glass-"]:root body :is(
    #communityDetailModal.is-open.is-sheet-drag-releasing,
    #communityCommentsModal.is-open.is-sheet-drag-releasing
  )::before {
    transition: opacity var(--community-sheet-release-duration, 220ms) var(--sheet-system-open-easing);
  }

  /*
   * Every dismiss path removes is-open and enters the same closing state.
   * Keep input inert while the shared panel and scrim transitions finish.
   */
  html[data-theme^="glass-"]:root body :is(
    #communityDetailModal.is-sheet-closing,
    #communityCommentsModal.is-sheet-closing
  ) {
    pointer-events: none;
  }

  /*
   * Food selection keeps its two-frame stable-layer handoff. Its backdrop uses
   * the shared timing while the heavy editor itself stays still during exit.
   */
  html[data-theme^="glass-"]:root body .food-selection-backdrop.is-closing.is-exiting {
    opacity: 0;
    transition-duration: var(--sheet-system-close-duration);
  }

  /*
   * Existing pseudo handles were shown on sheets that could not be dragged.
   * Keep the affordance only on the two headers that already support dragging.
   */
  html[data-theme^="glass-"]:root body :is(
    .profile-edit-dialog,
    #feedbackModal .feedback-dialog,
    .food-selection-dialog,
    .manual-food-dialog,
    .quick-weight-dialog,
    .policy-panel,
    .notification-panel,
    .ai-summary-panel,
    .community-detail-panel,
    .community-comments-panel
  )::before,
  html[data-theme^="glass-"]:root body :is(
    .policy-header,
    .notification-header,
    .ai-summary-header
  )::before,
  html[data-theme^="glass-"]:root body .community-comment-action-sheet-handle {
    display: none;
    content: none;
  }

  html[data-theme^="glass-"]:root body :is(
    .community-detail-header,
    .community-comments-modal-header
  )::before {
    position: absolute;
    z-index: 3;
    top: 9px;
    left: 50%;
    width: 38px;
    height: 4px;
    display: block;
    border-radius: 999px;
    background: color-mix(in srgb, var(--sheet-system-ink) 24%, transparent);
    content: "";
    pointer-events: none;
    transform: translateX(-50%);
  }

  html[data-theme^="glass-"]:root body :is(
    .policy-header,
    .notification-header,
    .ai-summary-header
  ) {
    min-height: 70px;
    padding-top: 18px;
  }

  html[data-theme^="glass-"]:root body :is(
    .community-detail-header,
    .community-comments-modal-header
  ) {
    min-height: 76px;
    padding-top: 25px;
  }

  html[data-theme^="glass-"]:root body :is(
    .profile-edit-dialog,
    #feedbackModal .feedback-dialog,
    .food-selection-dialog,
    .manual-food-dialog,
    .quick-weight-dialog
  ) {
    padding-top: 22px;
  }

  /*
   * Decision prompts are dialogs, not draggable sheets. They use one compact
   * centered frame and a short fade/settle motion without a drag affordance.
   */
  html[data-theme^="glass-"]:root body :is(
    .privacy-consent-backdrop,
    .notification-permission-prompt-backdrop,
    .passkey-prompt-backdrop,
    #communityConsentModal,
    #withdrawConsentModal,
    #deleteOwnAccountModal,
    .action-confirm-backdrop
  ) {
    align-items: center !important;
    justify-items: center !important;
    padding:
      max(16px, var(--modal-safe-top-gap))
      max(16px, var(--modal-safe-right-gap))
      max(16px, var(--modal-safe-bottom-gap))
      max(16px, var(--modal-safe-left-gap)) !important;
    background-color: var(--sheet-system-scrim);
    opacity: 0;
    -webkit-backdrop-filter: blur(8px) saturate(0.96);
    backdrop-filter: blur(8px) saturate(0.96);
    transition: opacity 220ms ease;
  }

  html[data-theme^="glass-"]:root body :is(
    .privacy-consent-backdrop,
    .notification-permission-prompt-backdrop,
    .passkey-prompt-backdrop,
    #communityConsentModal,
    #withdrawConsentModal,
    #deleteOwnAccountModal,
    .action-confirm-backdrop
  ).is-open {
    background-color: var(--sheet-system-scrim);
    opacity: 1;
  }

  html[data-theme^="glass-"]:root body :is(
    .privacy-consent-dialog,
    .notification-permission-prompt-dialog,
    .passkey-prompt-dialog,
    #communityConsentModal .consent-dialog,
    #withdrawConsentModal .confirmation-dialog,
    #deleteOwnAccountModal .confirmation-dialog,
    .action-confirm-dialog
  ) {
    width: min(100%, 520px) !important;
    max-width: 520px !important;
    max-height: calc(100dvh - 32px);
    justify-self: center;
    margin: 0 auto !important;
    border: 1px solid var(--sheet-system-line);
    border-radius: var(--sheet-system-dialog-radius);
    padding: 24px;
    background: var(--sheet-system-surface);
    color: var(--sheet-system-ink);
    box-shadow: var(--sheet-system-dialog-shadow);
    opacity: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transform: translate3d(0, 14px, 0) scale(0.97);
    transition:
      opacity 220ms ease,
      transform 240ms var(--sheet-system-open-easing);
    will-change: opacity, transform;
  }

  html[data-theme^="glass-"]:root body :is(
    .privacy-consent-backdrop.is-open .privacy-consent-dialog,
    .notification-permission-prompt-backdrop.is-open .notification-permission-prompt-dialog,
    .passkey-prompt-backdrop.is-open .passkey-prompt-dialog,
    #communityConsentModal.is-open .consent-dialog,
    #withdrawConsentModal.is-open .confirmation-dialog,
    #deleteOwnAccountModal.is-open .confirmation-dialog,
    .action-confirm-backdrop.is-open .action-confirm-dialog
  ) {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }

  html[data-theme^="glass-"]:root body :is(
    .privacy-consent-dialog,
    .notification-permission-prompt-dialog,
    .passkey-prompt-dialog,
    #communityConsentModal .consent-dialog,
    #withdrawConsentModal .confirmation-dialog,
    #deleteOwnAccountModal .confirmation-dialog,
    .action-confirm-dialog
  )::before {
    display: none;
    content: none;
  }

  /* Compact action menus use the same surface, radius and motion vocabulary. */
  html[data-theme^="glass-"]:root body .community-comment-action-sheet-backdrop {
    background-color: var(--sheet-system-scrim);
    transition: opacity var(--sheet-system-close-duration) ease;
  }

  html[data-theme^="glass-"]:root body .community-comment-action-sheet-backdrop.is-open {
    background-color: var(--sheet-system-scrim);
    transition-duration: var(--sheet-system-scrim-open-duration);
  }

  html[data-theme^="glass-"]:root body .community-comment-action-sheet {
    border: 1px solid var(--sheet-system-line);
    border-bottom: 0;
    border-radius: 22px 22px 0 0;
    background: var(--sheet-system-surface);
    box-shadow: var(--sheet-system-shadow);
    transform: translate3d(0, 104%, 0);
    transition:
      transform var(--sheet-system-close-duration) var(--sheet-system-close-easing);
  }

  html[data-theme^="glass-"]:root body .community-comment-action-sheet-backdrop.is-open .community-comment-action-sheet {
    transform: translate3d(0, 0, 0);
    transition-duration: var(--sheet-system-open-duration);
    transition-timing-function: var(--sheet-system-open-easing);
  }
}

@media (max-width: 1024px) and (prefers-color-scheme: dark),
  (max-width: 1366px) and (any-pointer: coarse) and (prefers-color-scheme: dark) {
  html[data-theme^="glass-"] {
    --sheet-system-scrim: rgba(0, 7, 12, 0.66);
    --sheet-system-shadow: 0 -22px 64px rgba(0, 0, 0, 0.46);
    --sheet-system-dialog-shadow: 0 28px 80px rgba(0, 0, 0, 0.5);
  }
}

@media (max-width: 1024px) and (prefers-reduced-motion: reduce),
  (max-width: 1366px) and (any-pointer: coarse) and (prefers-reduced-motion: reduce) {
  html[data-theme^="glass-"]:root body :is(
    .profile-edit-backdrop,
    #feedbackModal,
    .food-selection-backdrop,
    .manual-food-backdrop,
    .quick-weight-backdrop,
    .policy-backdrop,
    .notification-backdrop,
    .ai-summary-backdrop,
    .community-detail-backdrop,
    .community-comments-backdrop,
    .privacy-consent-backdrop,
    .notification-permission-prompt-backdrop,
    .passkey-prompt-backdrop,
    #communityConsentModal,
    #withdrawConsentModal,
    #deleteOwnAccountModal,
    .action-confirm-backdrop,
    .community-comment-action-sheet-backdrop
  ),
  html[data-theme^="glass-"]:root body :is(
    .profile-edit-dialog,
    #feedbackModal .feedback-dialog,
    .food-selection-dialog,
    .manual-food-dialog,
    .quick-weight-dialog,
    .policy-panel,
    .notification-panel,
    .ai-summary-panel,
    .community-detail-panel,
    .community-comments-panel,
    .privacy-consent-dialog,
    .notification-permission-prompt-dialog,
    .passkey-prompt-dialog,
    #communityConsentModal .consent-dialog,
    #withdrawConsentModal .confirmation-dialog,
    #deleteOwnAccountModal .confirmation-dialog,
    .action-confirm-dialog,
    .community-comment-action-sheet
  ) {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(
    #communityDetailModal,
    #communityCommentsModal,
    #communityDetailModal .community-detail-panel,
    #communityCommentsModal .community-comments-panel
  ) {
    transition: none;
  }
}