/* 🔔 Тосты */
:root{
  /* выставь под фактическую max-width своей .page-wrapper */
  --layout-max: 1300px;
  --layout-side-pad: 16px;
}

#toast-root{
  position: fixed;
  top: 16px;

  /* ⬇️ Правый отступ внутри "белого полотна":
     max(16px, (поля по бокам у центрированного контейнера) + его внутренний паддинг) */
  right: calc(
    max(16px, ((100vw - var(--layout-max)) / 2) + var(--layout-side-pad))
  );

  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 8px;

  /* чтобы клики проходили мимо пустого места, а сами тосты ловили клики */
  pointer-events: none;
}

.toast{
  pointer-events: auto;

  min-width: 280px;
  max-width: 420px;
  background: #fff;
  border-left: 6px solid #888;
  box-shadow: 0 8px 24px rgba(0,0,0,.16);
  border-radius: 10px;
  padding: 10px 14px;

  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 10px;
  align-items: start;

  animation: toast-in .18s ease-out;
  font-size: 14px;
}

.toast .icon{
  line-height: 1;
  user-select: none;
  font-weight: 700;
}
.toast .title{ font-weight: 600; margin-top: 1px; }
.toast .text{ color: #333; margin-top: 2px; }
.toast .close{
  border: none; background: transparent; cursor: pointer;
  font-size: 18px; line-height: 1; padding: 0 2px; opacity: .6;
}
.toast .close:hover{ opacity: 1; }

.toast-success{ border-left-color: #22c55e; } /* green-500 */
.toast-error{   border-left-color: #ef4444; } /* red-500  */
.toast-info{    border-left-color: #3b82f6; } /* blue-500 */
.toast-warning{ border-left-color: #f59e0b; } /* amber-500 */

@keyframes toast-in { from { transform: translateY(-6px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes toast-out{ to   { transform: translateY(-6px); opacity: 0; } }

/* 📱 На очень узких экранах вплотную к краю, чтобы не съедать контент */
@media (max-width: 520px){
  #toast-root{
    right: 12px;
    top: 12px;
  }
  .toast{
    min-width: 240px;
    max-width: min(360px, 90vw);
  }
}