/* Shared modal + toast components (Prompt Z). Used by the public site and the panel. */

.ui-dialog { border: 1px solid var(--line-strong, rgba(236, 235, 230, 0.28)); background: var(--bg-2, #101013); color: var(--text, #ecebe6); padding: 0; max-width: min(92vw, 520px); width: 100%; border-radius: 0; }
.ui-dialog::backdrop { background: rgba(5, 5, 7, 0.72); backdrop-filter: blur(4px); }
.ui-dialog__inner { padding: 2rem; display: grid; gap: 1rem; }
.ui-dialog__title { font: 500 1.75rem/1.15 var(--serif, Georgia, serif); margin: 0; }
.ui-dialog__message { margin: 0; color: var(--text-2, #b9b8b2); }
/* The builder in ui.js toggles this block with the hidden attribute; an author display
   would otherwise beat the UA [hidden] rule and leave an empty input on every dialog. */
.ui-dialog__typed { display: grid; gap: 0.5rem; }
.ui-dialog__typed[hidden] { display: none; }
.ui-dialog__typed label { font: 600 0.72rem/1 var(--sans, sans-serif); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-2, #b9b8b2); }
.ui-dialog__typed input { background: var(--bg, #0b0b0d); border: 1px solid var(--line-strong, #444); color: inherit; padding: 0.8rem 1rem; font: inherit; border-radius: 0; }
.ui-dialog__actions { display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 0.75rem; }
.ui-dialog[open] { animation: ui-dialog-in 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes ui-dialog-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.toast-region { position: fixed; right: 1rem; bottom: 1rem; z-index: 90; display: grid; gap: 0.5rem; width: min(92vw, 380px); pointer-events: none; }
.toast-region .flash { margin: 0; pointer-events: auto; display: flex; align-items: flex-start; gap: 1rem; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45); animation: ui-toast-in 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.toast-region .flash.is-leaving { opacity: 0; transform: translateY(8px); transition: opacity 0.3s, transform 0.3s; }
.toast-region .flash__close { margin-left: auto; opacity: 0.7; padding: 0; line-height: 1; }
.toast-region .flash__close:hover { opacity: 1; }
@keyframes ui-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .ui-dialog[open], .toast-region .flash { animation: none; }
}