/* =====================================================
   InsideProxy Notification System
   Based on custom toast design
   ===================================================== */

.toast-host {
  position:fixed;z-index:99999;
  padding:10px 14px;pointer-events:none;
  display:flex;flex-direction:column;
  width:min(360px,100vw);
}
.toast-host[data-pos="br"]{right:0;bottom:0;align-items:flex-end}
.toast-host[data-pos="tr"]{right:0;top:0;align-items:flex-end}
.toast-host[data-pos="tc"]{left:50%;transform:translateX(-50%);top:0;width:min(380px,96vw);align-items:stretch;padding:10px 0}
.toast-host[data-pos="bc"]{left:50%;transform:translateX(-50%);bottom:0;width:min(380px,96vw);align-items:stretch;padding:10px 0}
.toast-host[data-pos="tc"] .toast-stack,
.toast-host[data-pos="bc"] .toast-stack{width:100%;max-width:none}

.toast-stack{position:relative;width:100%;display:flex;flex-direction:column;gap:8px;pointer-events:auto}
.toast-host[data-pos="br"] .toast-stack,
.toast-host[data-pos="bc"] .toast-stack{flex-direction:column-reverse}

/* ── toast item ── */
.toast-item {
  --tint:#22c55e;
  --tint-bg:rgba(34,197,94,.10);
  --tint-line:rgba(34,197,94,.32);
  --tint-glow:rgba(34,197,94,.22);
  position:relative;width:100%;
  background:
    radial-gradient(120% 140% at 0% 0%, var(--tint-bg), transparent 55%),
    linear-gradient(180deg,#0f1216 0%,#0b0d10 100%);
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.5),
    0 14px 32px -10px rgba(0,0,0,.7),
    0 2px 8px -2px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.04);
  color:#e7e9ee;
  overflow:hidden;
  font-family:'Inter',-apple-system,sans-serif;
  font-size:13px;
  will-change:transform,opacity;
  animation:ip-toast-in .38s cubic-bezier(.2,.9,.25,1.05) both;
}
.toast-item::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px var(--tint-line);
  opacity:.55;
  mask:linear-gradient(180deg,#000,transparent 60%);
  -webkit-mask:linear-gradient(180deg,#000,transparent 60%);
}
.toast-item.exiting{animation:ip-toast-out .25s cubic-bezier(.5,0,.75,0) forwards}

@keyframes ip-toast-in {
  from{opacity:0;transform:translateY(-16px) scale(.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes ip-toast-out {
  to{opacity:0;transform:translateX(110%) scale(.93)}
}

/* type tints */
.toast-item[data-type="success"]{--tint:#22c55e;--tint-bg:rgba(34,197,94,.10);--tint-line:rgba(34,197,94,.32);--tint-glow:rgba(34,197,94,.22)}
.toast-item[data-type="error"]  {--tint:#f43f5e;--tint-bg:rgba(244,63,94,.10); --tint-line:rgba(244,63,94,.32); --tint-glow:rgba(244,63,94,.22)}
.toast-item[data-type="warn"]   {--tint:#f59e0b;--tint-bg:rgba(245,158,11,.10);--tint-line:rgba(245,158,11,.32);--tint-glow:rgba(245,158,11,.22)}
.toast-item[data-type="info"]   {--tint:#3b82f6;--tint-bg:rgba(59,130,246,.10);--tint-line:rgba(59,130,246,.32);--tint-glow:rgba(59,130,246,.22)}
.toast-item[data-type="loading"]{--tint:#a78bfa;--tint-bg:rgba(167,139,250,.10);--tint-line:rgba(167,139,250,.32);--tint-glow:rgba(167,139,250,.22)}
.toast-item[data-type="message"]{--tint:#e7e9ee;--tint-bg:rgba(255,255,255,.04);--tint-line:rgba(255,255,255,.16);--tint-glow:rgba(255,255,255,.12)}

.toast-row{display:flex;gap:9px;align-items:flex-start;padding:10px 11px 9px}
.toast-icon{
  flex:0 0 24px;width:24px;height:24px;border-radius:7px;
  background:var(--tint-bg);color:var(--tint);
  display:grid;place-items:center;position:relative;
  box-shadow:inset 0 0 0 1px var(--tint-line);
}
.toast-icon svg{width:11px;height:11px}
.toast-icon .ring{
  position:absolute;inset:-1px;border-radius:9px;
  background:radial-gradient(closest-side,var(--tint-glow),transparent 70%);
  filter:blur(8px);z-index:-1;opacity:.9
}
.toast-item[data-type="loading"] .toast-icon svg{animation:ip-spin 800ms linear infinite}
@keyframes ip-spin{to{transform:rotate(360deg)}}

.toast-body{flex:1;min-width:0;padding-top:1px}
.toast-title{font-size:12px;font-weight:600;letter-spacing:-.005em;line-height:1.3;color:#f1f5f9}
.toast-desc{margin-top:2px;font-size:11px;color:rgba(225,232,240,.65);line-height:1.4}
.toast-meta{margin-top:6px;display:flex;align-items:center;gap:8px;font-size:11px;color:rgba(225,232,240,.4)}
.toast-meta .dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.5}

.toast-close{
  appearance:none;border:0;background:transparent;
  color:rgba(225,232,240,.4);width:22px;height:22px;border-radius:6px;
  cursor:pointer;display:grid;place-items:center;
  flex:0 0 22px;margin:-2px -3px 0 0;
  transition:background .12s,color .12s;
}
.toast-close:hover{background:rgba(255,255,255,.07);color:#e7e9ee}
.toast-close svg{width:10px;height:10px}

.toast-actions{display:flex;gap:6px;padding:0 10px 10px 50px}
.toast-actions .ta{
  appearance:none;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);
  color:#e7e9ee;font-family:'Inter',-apple-system,sans-serif;font-size:11.5px;font-weight:500;
  padding:5px 10px;border-radius:7px;cursor:pointer;
  transition:background .12s,border-color .12s
}
.toast-actions .ta:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22)}
.toast-actions .ta.primary{background:var(--tint);color:#0a0c0f;border-color:transparent;font-weight:600}
.toast-actions .ta.primary:hover{filter:brightness(1.08)}
.toast-actions .ta.ghost{background:transparent;border-color:transparent;color:rgba(225,232,240,.55)}
.toast-actions .ta.ghost:hover{color:#e7e9ee;background:rgba(255,255,255,.05)}

.toast-progress{
  position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--tint),color-mix(in srgb,var(--tint) 75%,white));
  transform-origin:left;
  animation:ip-tprog var(--dur,5s) linear forwards;
  opacity:.85
}
@keyframes ip-tprog{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.toast-item.paused .toast-progress{animation-play-state:paused}

.toast-progressbar{margin-top:7px;height:4px;background:rgba(255,255,255,.06);border-radius:99px;overflow:hidden}
.toast-progressbar i{display:block;height:100%;background:var(--tint);border-radius:inherit;transition:width .3s ease}

/* stacking */
.toast-stack.collapsed{display:block;height:80px}
.toast-stack.collapsed .toast-item{position:absolute;left:0;right:0;transition:transform .3s cubic-bezier(.2,.9,.25,1.05),opacity .22s ease}
.toast-host[data-pos="tr"] .toast-stack.collapsed .toast-item,
.toast-host[data-pos="tc"] .toast-stack.collapsed .toast-item{top:0}
.toast-stack.collapsed:hover{height:auto}
.toast-stack.collapsed:hover .toast-item{position:relative!important;transform:none!important;opacity:1!important;margin-top:8px}
.toast-stack.collapsed:hover .toast-item:first-child{margin-top:0}

/* msg avatar variant */
.toast-item.msg .toast-icon{background:linear-gradient(135deg,#3b82f6,#a78bfa);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.toast-item.msg .toast-icon span{font-size:10px;font-weight:700}