/* public/ui/toast.css */
.toast-host {
   position: fixed;
   top: calc(var(--header-h) + 12px);
   left: 50%;
   transform: translateX(-50%);
   z-index: 3000;

   display: grid;
   gap: 10px;

   width: min(520px, calc(100vw - 24px));
   pointer-events: none;
   /* host não bloqueia cliques */
}

.toast {
   pointer-events: auto;
   /* toast clicável */
   border: 1px solid var(--border);
   background: color-mix(in oklab, var(--panel), #fff 2%);
   color: var(--text);
   border-radius: var(--r-lg);
   box-shadow: var(--shadow);
   overflow: hidden;
}

.toast__row {
   display: grid;
   grid-template-columns: 18px 1fr auto;
   gap: 10px;
   padding: 12px 12px;
   align-items: start;
}

.toast__icon {
   width: 18px;
   height: 18px;
   margin-top: 2px;
   border-radius: 999px;
   background: color-mix(in oklab, var(--muted), #0000 70%);
}

.toast__title {
   font-weight: 650;
   margin: 0;
   line-height: 1.2;
}

.toast__msg {
   margin: 4px 0 0 0;
   color: var(--muted);
   line-height: 1.35;
   font-size: var(--fs-sm);
}

.toast__close {
   width: 34px;
   height: 34px;
   border-radius: 12px;
   border: 1px solid transparent;
   background: transparent;
   cursor: pointer;
   color: var(--text);
   display: grid;
   place-items: center;
}

.toast__close:hover {
   background: var(--hover);
}

.toast__actions {
   display: flex;
   gap: 8px;
   padding: 0 12px 12px 12px;
   justify-content: flex-end;
}

.toast__btn {
   height: 36px;
   padding: 0 12px;
   border-radius: 12px;
   border: 1px solid var(--border);
   background: transparent;
   cursor: pointer;
   color: var(--text);
   font-weight: 650;
}

.toast__btn:hover {
   background: var(--hover);
   border-color: transparent;
}

.toast__btn.primary {
   background: var(--brand);
   color: var(--brand-contrast);
   border-color: transparent;
}

.toast__btn.primary:hover {
   filter: brightness(1.06);
}

.toast--success {
   border-color: color-mix(in oklab, var(--success), #0000 65%);
}

.toast--success .toast__icon {
   background: color-mix(in oklab, var(--success), #0000 55%);
}

.toast--danger {
   border-color: color-mix(in oklab, var(--danger), #0000 65%);
}

.toast--danger .toast__icon {
   background: color-mix(in oklab, var(--danger), #0000 55%);
}

.toast--warning {
   border-color: color-mix(in oklab, var(--warning), #0000 65%);
}

.toast--warning .toast__icon {
   background: color-mix(in oklab, var(--warning), #0000 55%);
}

.toast--info {
   border-color: color-mix(in oklab, var(--info), #0000 65%);
}

.toast--info .toast__icon {
   background: color-mix(in oklab, var(--info), #0000 55%);
}

@media (max-width: 520px) {
   .toast-host {
      top: calc(var(--header-h) + 10px);
      width: calc(100vw - 16px);
   }
}