/* Modal de confirmação + Toast — portados do design system tripaulx (/osx/ds:
   "03d Modal dialogs", toasts). Vanilla <dialog> nativo, tokens de base.css. */

/* ── Modal ─────────────────────────────────────────────────────────────── */
.ds-modal {
  width: min(92vw, 420px); /* sm (DS) */
  padding: 0;
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  background: var(--elevated);
  color: var(--text);
  box-shadow: 0 24px 48px -8px oklch(0% 0 0 / 0.45), 0 8px 16px -4px oklch(0% 0 0 / 0.3);
  animation: ds-pop 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ds-modal--md { width: min(92vw, 520px); }
.ds-modal::backdrop {
  background: oklch(0% 0 0 / 0.45);
  backdrop-filter: blur(4px);
  animation: ds-fade 0.18s ease-out;
}
@keyframes ds-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ds-pop {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

.ds-modal-pad { padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.ds-modal-head { display: flex; align-items: flex-start; gap: 14px; }
.ds-modal-icon {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--c); background: color-mix(in oklch, var(--c) 18%, transparent);
}
.ds-modal-titles { min-width: 0; }
.ds-modal-title { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.ds-modal-desc { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.ds-modal-body { font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.ds-modal-body b { color: var(--text); }

/* tons (define --c usado pelo ícone) */
.ds-tone-danger { --c: var(--danger); }
.ds-tone-warning { --c: var(--warn); }
.ds-tone-success { --c: var(--ok); }
.ds-tone-brand { --c: var(--blue); }

/* campo de confirmação digitada (ex.: digitar o @username) */
.ds-field { display: flex; flex-direction: column; gap: 6px; }
.ds-field-lbl { font-size: 12px; font-weight: 600; color: var(--muted); }
.ds-input {
  background: var(--bg); border: 1px solid var(--border2); color: var(--text);
  border-radius: 10px; padding: 10px 12px; font-size: 14px; font-family: inherit; width: 100%;
}
.ds-input:focus {
  outline: none;
  border-color: color-mix(in oklch, var(--blue) 60%, var(--border2));
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--blue) 22%, transparent);
}

/* footers: inline (à direita) ou tray (faixa separada, como no DS) */
.ds-modal-foot { display: flex; justify-content: flex-end; gap: 8px; }
.ds-foot--inline { padding-top: 2px; }
.ds-foot--tray {
  padding: 13px 22px;
  border-top: 1px solid var(--border);
  background: color-mix(in oklch, var(--bg) 55%, transparent);
}

/* ── Toast ─────────────────────────────────────────────────────────────── */
.ds-toasts {
  position: fixed; right: 18px; bottom: 18px; z-index: 3000;
  display: flex; flex-direction: column; gap: 10px; max-width: 92vw;
}
.ds-toast {
  display: flex; align-items: flex-start; gap: 11px;
  min-width: 280px; max-width: 400px; padding: 12px 14px;
  border: 1px solid var(--border2); border-radius: 12px;
  background: var(--elevated); color: var(--text);
  box-shadow: 0 12px 28px -6px oklch(0% 0 0 / 0.4);
  animation: ds-toast-in 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ds-toast.out { opacity: 0; transform: translateY(6px); transition: opacity 0.18s, transform 0.18s; }
@keyframes ds-toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.ds-toast-ic { flex: none; margin-top: 1px; color: var(--c); }
.ds-toast-bd { flex: 1; min-width: 0; }
.ds-toast-tt { margin: 0 0 2px; font-size: 13.5px; font-weight: 700; }
.ds-toast-msg { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.ds-toast-x {
  flex: none; border: 0; background: transparent; color: var(--faint);
  font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px;
}
.ds-toast-x:hover { color: var(--text); }