/* Share, confirm and photo dialogs: bottom sheets with a grab handle on phones, a gentle rise elsewhere. */
.sheet-grabber { display: none; }
dialog.peony-sheet[open] { animation: peony-dialog-in .34s cubic-bezier(.22, 1, .36, 1); }
dialog.peony-sheet[open]::backdrop { animation: peony-fade-in .3s ease-out; }
@keyframes peony-dialog-in { from { opacity: 0; transform: translateY(14px) scale(.97); } }
@keyframes peony-sheet-up { from { transform: translateY(100%); } }
@keyframes peony-fade-in { from { opacity: 0; } }

@media (max-width: 700px) {
  /* #exportDialog is named too so this beats its ID rule in sharing.css. */
  dialog.peony-sheet, #exportDialog.peony-sheet {
    inset: auto 0 0;
    width: 100%;
    max-width: none;
    max-height: calc(100dvh - max(16px, env(safe-area-inset-top)));
    margin: 0;
    border-width: 1px 0 0;
    border-radius: var(--radius-l) var(--radius-l) 0 0;
    box-shadow: inset 0 1px 0 #fff, var(--shadow-float);
  }
  /* Kept apart from the rule above so the ID selector there can't keep this on while dragging. */
  dialog.peony-sheet { transition: transform .24s cubic-bezier(.2, .8, .2, 1); }
  /* The iOS sheet curve: it leaves the edge quickly and settles softly. */
  dialog.peony-sheet[open] { animation: peony-sheet-up .44s cubic-bezier(.32, .72, 0, 1); }
  dialog.peony-sheet.sheet-dragging { transition: none; }
  /* Room for the handle above the content and the home indicator below it. */
  dialog.peony-sheet:not(.peony-save-result) { padding: 34px 22px calc(22px + env(safe-area-inset-bottom)); }
  #exportDialog.peony-sheet { padding: 30px 20px calc(18px + env(safe-area-inset-bottom)); }
  #exportDialog.peony-sheet .eyebrow { margin-top: 4px; }
  .peony-save-result.peony-sheet .save-result-heading { padding-top: 22px; }
  .peony-save-result.peony-sheet .save-result-actions { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .peony-sheet .dialog-close { top: 14px; right: 12px; }

  /* The handle: a wide, easy target with a small bar, clear of the close button. */
  .sheet-grabber { display: block; position: absolute; z-index: 2; top: 0; left: 50%; width: 132px; height: 44px; margin-left: -66px; touch-action: none; cursor: grab; }
  .sheet-grabber::before { content: ''; position: absolute; top: 9px; left: 50%; width: 38px; height: 5px; margin-left: -19px; border-radius: var(--radius-pill); background: var(--petal); }
  .sheet-dragging .sheet-grabber { cursor: grabbing; }
}
@media (max-width: 700px) and (max-height: 650px) {
  dialog.peony-sheet:not(.peony-save-result) { padding-top: 30px; }
  #exportDialog.peony-sheet { padding-top: 26px; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  dialog.peony-sheet[open] { animation: peony-fade-in .15s ease-out; }
}