@layer components {
  .dialog {
    width: min(560px, calc(100vw - 32px)); padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-xl);
    background: var(--popover); color: var(--popover-foreground); box-shadow: var(--shadow-sm);
    display: flex; flex-direction: column; gap: 14px; font-size: 13px;
  }
  .dialog::backdrop { background: oklch(0 0 0 / 0.35); }
  .dialog:not([open]) { display: none; }
  .publish-preview { padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); }
  .publish-files { display: flex; flex-direction: column; gap: 4px; }
  .publish-files ul { margin: 0; padding-left: 18px; }
  .publish-warning {
    display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 9px;
    border: 1px solid var(--jx-wait); background: var(--jx-wait-soft);
  }

  /* Phones: the app's dialogs rise from the bottom, their buttons across the width, clear of the home indicator. */
  @media (max-width: 767px) {
    .dialog {
      width: 100%; max-width: none; max-height: 92dvh; margin: auto 0 0; overflow-y: auto; border-width: 1px 0 0;
      border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding-bottom: calc(20px + var(--safe-bottom));
    }
    .dialog .button-row { flex-direction: column; align-items: stretch; }
    .dialog .button-row .button { width: 100%; min-height: var(--tap); }
  }
}