/* /opt/skynet-portal/app/static/css/toast.css */
/* v0.1.0 — централизованные премиум-тосты: стек, иконки, прогресс-бар */
/* 14.06.2026: типы success/danger/warning/info, авто-скрытие, пауза на hover */

.toast-container{
  position:fixed; top:18px; right:18px; z-index:9999;
  display:flex; flex-direction:column; gap:12px;
  max-width:380px; width:calc(100% - 36px); pointer-events:none;
}
.toast{
  pointer-events:auto; position:relative; overflow:hidden;
  display:flex; align-items:flex-start; gap:12px; padding:14px;
  border-radius:var(--radius-lg,14px);
  background:color-mix(in srgb, var(--bg-surface,#141826) 92%, transparent);
  border:var(--border-thin,1px) solid var(--border-default,rgba(255,255,255,.08));
  border-left:3px solid var(--toast-accent,#8b7cff);
  box-shadow:0 12px 32px -8px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.02);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  color:var(--text-primary,#eef);
  transform:translateX(28px); opacity:0;
  transition:transform .32s cubic-bezier(.22,1,.36,1), opacity .32s;
}
.toast.is-in{ transform:translateX(0); opacity:1; }
.toast.is-out{ transform:translateX(28px); opacity:0; }

.toast-icon{
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:9px; margin-top:1px;
  background:color-mix(in srgb, var(--toast-accent,#8b7cff) 20%, transparent);
  color:var(--toast-accent,#8b7cff);
}
.toast-icon svg{ width:17px; height:17px; }

.toast-content{ flex:1 1 auto; min-width:0; }
.toast-title{ font-size:13px; font-weight:700; line-height:1.3; margin-bottom:2px; color:var(--text-primary,#fff); }
.toast-message{ font-size:13px; line-height:1.4; color:var(--text-secondary,#c8cee0); word-wrap:break-word; }

.toast-close{
  flex:0 0 auto; cursor:pointer; background:transparent; border:0; padding:2px;
  color:var(--text-muted,#8a90a6); border-radius:6px; line-height:0;
  transition:color .15s, background .15s;
}
.toast-close:hover{ color:var(--text-primary,#fff); background:rgba(255,255,255,.06); }
.toast-close svg{ width:15px; height:15px; }

.toast-progress{
  position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--toast-accent,#8b7cff); transform-origin:left center; opacity:.7;
}

.toast.success{ --toast-accent:#22c55e; }
.toast.danger { --toast-accent:#ef4444; }
.toast.warning{ --toast-accent:#f59e0b; }
.toast.info   { --toast-accent:#3b9eff; }