/* UI-Design-System §6: only this native dialog opts into dark tokens. */
.app-dialog {
    color: var(--ui-text);
    background: var(--ui-surface-raised);
    border: 1px solid var(--ui-divider);
    border-radius: 10px;
    box-shadow: var(--ui-shadow-popover);
    padding: 0;
    margin: auto;
    width: min(560px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    max-height: calc(100dvh - 32px);
    font-size: 13px;
    overflow: hidden;
    animation: app-dialog-in 120ms ease-out;
}
.app-dialog[open] { display: flex; flex-direction: column; }
.app-dialog[data-size=sm] { width: min(420px, calc(100vw - 32px)); }
.app-dialog[data-size=lg] { width: min(880px, calc(100vw - 32px)); }
.app-dialog[data-size=xl] { width: min(1200px, 95vw); }
.app-dialog::backdrop { background: rgb(0 0 0 / 40%); }
.app-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px; border-bottom: 1px solid var(--ui-divider); flex-shrink: 0; }
.app-dialog-title { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ui-text-strong); }
.app-dialog-description, .app-dialog-detail { margin: 6px 0 0; color: var(--ui-text-muted); font-size: 12px; white-space: pre-wrap; }
.app-dialog-close { border: 0; border-radius: 6px; background: transparent; color: var(--ui-text-muted); width: 32px; height: 32px; font-size: 22px; cursor: pointer; flex-shrink: 0; }
.app-dialog-close:hover { background: var(--ui-control-bg-hover); }
.app-dialog-body { padding: 20px; min-height: 0; overflow-y: auto; }
.app-dialog-message { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.65; margin: 0; }
.app-dialog-footer { padding: 14px 20px; border-top: 1px solid var(--ui-divider); display: flex; flex-wrap: wrap; align-items: center; gap: 12px; flex-shrink: 0; }
.app-dialog-status { margin: 0; color: var(--ui-text-muted); flex: 1 1 160px; font-size: 12px; white-space: pre-wrap; }
.app-dialog-status[data-tone=error] { color: var(--ui-danger); }
.app-dialog-actions { display: flex; gap: 8px; margin-left: auto; }
.app-dialog .btn { color: var(--ui-text); background: var(--ui-control-bg); border: 1px solid var(--ui-control-border); border-radius: 6px; height: 32px; padding: 0 12px; font-size: 12px; white-space: nowrap; }
.app-dialog .btn-primary { color: var(--ui-on-accent); background: var(--ui-accent); border-color: var(--ui-accent); }
.app-dialog .btn.is-danger { color: var(--ui-on-accent); background: var(--ui-danger-solid); border-color: var(--ui-danger-solid); }
.app-dialog :is(button,input,textarea,select):focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
.app-dialog :disabled { opacity: .6; cursor: wait; }
.app-dialog-field { display: flex; flex-direction: column; gap: 8px; }
.app-dialog :is(input,textarea) { background: var(--ui-control-bg); color: var(--ui-text); border: 1px solid var(--ui-control-border); border-radius: 6px; padding: 8px 10px; font: inherit; width: 100%; min-height: 32px; }
.app-dialog textarea { min-height: 180px; resize: vertical; }
.app-dialog-field label { font-size: 12px; }
.app-dialog [aria-invalid=true] { border-color: var(--ui-danger); }
#toast-container.app-notifications-toplayer { inset: auto 24px 24px auto; margin: 0; padding: 0; border: 0; background: transparent; overflow: visible; max-width: min(360px, calc(100vw - 32px)); }
@keyframes app-dialog-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .app-dialog { animation: none; } }
@media (max-width: 480px) { .app-dialog-header, .app-dialog-body { padding: 16px; } .app-dialog-footer { padding: 12px 16px; } }
.app-dialog-search-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--ui-text-muted); font-size: 12px; }