/* Dialog components.
   - dialog (cloud-dialog): native <dialog> panel on an opaque raised surface.
   - dialog-card (group-modal-card): glass card inside a modal overlay.
   The old classes stay as aliases for the theme rules still in legacy. */
@layer components {
  .dialog, .cloud-dialog {
    margin: auto;
    width: min(520px, 94vw);
    max-height: 85dvh;
    padding: 20px;
    color: var(--sys-on-surface);
    background: var(--sys-bg-raised);
    border: 1px solid var(--sys-border);
    border-radius: 16px;
    font-size: 13px;
  }
  .dialog::backdrop, .cloud-dialog::backdrop { background: var(--comp-dialog-backdrop); }

  .dialog-card, .group-modal-card {
    position: relative;
    width: min(460px, 100%);
    padding: 26px;
    background: var(--sys-surface-plate);
    backdrop-filter: blur(var(--sys-blur)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--sys-blur)) saturate(180%);
    border: 1px solid var(--sys-border-strong);
    border-radius: var(--sys-radius-xl);
    box-shadow: var(--sys-elevation-2), var(--comp-dialog-card-shadow);
  }
  @supports (backdrop-filter: url(#liquid-refraction)) {
    .dialog-card, .group-modal-card { backdrop-filter: var(--sys-refraction); }
  }
}