/* ALS-625 — Shared modal scrim, surface, and sheet geometry */

.modal-overlay,
.ca-scrim,
dialog.ca-dialog::backdrop {
  background: rgb(var(--scrim-color-rgb) / var(--scrim-opacity)) !important;
  -webkit-backdrop-filter: blur(var(--scrim-blur));
  backdrop-filter: blur(var(--scrim-blur));
  z-index: var(--z-modal-scrim) !important;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .modal-overlay,
  .ca-scrim,
  dialog.ca-dialog::backdrop {
    background: rgb(var(--scrim-color-rgb) / var(--scrim-opacity-strong)) !important;
  }
}

.modal {
  background: var(--modal-surface) !important;
  border: 1px solid var(--modal-border);
  border-radius: var(--modal-radius) !important;
  box-shadow: var(--shadow-modal);
  z-index: var(--z-modal-dialog) !important;
}

.modal .modal-footer {
  background: transparent;
  border-top: 1px solid var(--border-subtle);
}

.modal[data-modal-size="sm"] {
  width: min(var(--modal-width-sm), 92vw) !important;
  max-width: min(var(--modal-width-sm), 92vw) !important;
}

.modal[data-modal-size="md"] {
  width: min(var(--modal-width-md), 92vw) !important;
  max-width: min(var(--modal-width-md), 92vw) !important;
}

.modal[data-modal-size="lg"] {
  width: min(var(--modal-width-lg), 92vw) !important;
  max-width: min(var(--modal-width-lg), 92vw) !important;
}

.modal.bottom-sheet {
  top: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  max-height: calc(100dvh - 24px) !important;
  border-radius: var(--sheet-radius) var(--sheet-radius) 0 0 !important;
  padding-bottom: env(safe-area-inset-bottom);
  overflow-y: auto;
}

.modal.bottom-sheet::before {
  content: "";
  display: block;
  width: 36px;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--border-strong);
  margin: 8px auto;
}

.report-user-modal.bottom-sheet {
  width: 100% !important;
  max-width: 100% !important;
  max-height: calc(100dvh - 24px) !important;
}

@media (max-width: 768px) {
  .modal:not(.bottom-sheet) {
    width: 95vw !important;
    max-width: 95vw !important;
    max-height: 85dvh !important;
  }

  .modal:not(.bottom-sheet) .modal-content {
    overflow-y: auto;
  }
}

.ca-dialog-panel {
  background: var(--modal-surface);
  border: 1px solid var(--modal-border);
  border-radius: var(--modal-radius);
  box-shadow: var(--shadow-modal);
  z-index: var(--z-modal-dialog);
}

.ca-sheet {
  width: 100% !important;
  max-width: 100% !important;
  max-height: calc(100dvh - 24px) !important;
  border-radius: var(--sheet-radius) var(--sheet-radius) 0 0 !important;
  padding-bottom: env(safe-area-inset-bottom);
  overflow-y: auto;
}

.ca-sheet::before {
  content: "";
  display: block;
  width: 36px;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--border-strong);
  margin: 8px auto;
}

@media (max-width: 768px) {
  .ca-sheet-mobile {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    transform: none !important;
    margin: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ca-scrim,
  .ca-dialog-panel {
    animation: none;
    transition: none;
  }
}