/* css/toasts.css — loaded in index.html cascade order. */
/* Toast w/ animated timer */

.toast{
  position:fixed;
  top:max(18px, env(safe-area-inset-top));
  left:max(18px, env(safe-area-inset-left));
  right:auto;
  bottom:auto;
  z-index:2147483647;
  width:min(390px, calc(100vw - 36px));
  opacity:0;
  pointer-events:none;
  transform: translate3d(0,-10px,0) scale(.98);
  transition: opacity .18s ease, transform .18s ease;
}

body[data-sidebar-position="left"] .toast{
  left:auto;
  right:max(18px, env(safe-area-inset-right));
}

.toast.is-showing{
  opacity:1;
  pointer-events:auto;
  transform: translate3d(0,0,0) scale(1);
}

.toast.is-leaving{
  opacity:0;
  pointer-events:none;
  transform: translate3d(0,-8px,0) scale(.985);
}

.toast-inner{
  position:relative;
  width:100%;
  overflow:hidden;
  border:1px solid color-mix(in oklab, var(--primary) 34%, rgba(255,255,255,.14) 66%);
  background:
    radial-gradient(220px 120px at 12% 0%, rgba(123,182,255,.20), transparent 64%),
    radial-gradient(180px 120px at 100% 20%, rgba(106,125,255,.16), transparent 60%),
    linear-gradient(180deg, rgba(15,20,34,.82), rgba(7,10,18,.74));
  backdrop-filter: blur(18px) saturate(1.18);
  -webkit-backdrop-filter: blur(18px) saturate(1.18);
  border-radius: 18px;
  box-shadow: 0 18px 48px rgba(0,0,0,.52), 0 0 0 1px rgba(255,255,255,.045) inset;
  padding:13px 12px 15px;
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:start;
  gap:12px;
}

.toast-inner::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:1px;
  background: linear-gradient(90deg, rgba(255,255,255,.34), rgba(255,255,255,.06));
  pointer-events:none;
}

.toast-left{
  min-width:0;
  position:relative;
  padding-left:12px;
}

.toast-left::before{
  content:"";
  position:absolute;
  left:0;
  top:.42em;
  width:6px;
  height:6px;
  border-radius:999px;
  background: var(--primary);
  box-shadow: 0 0 16px color-mix(in oklab, var(--primary) 75%, transparent 25%);
}

.toast-title{
  font-size:14px;
  line-height:1.2;
  font-weight:900;
  letter-spacing:.2px;
}

.toast-body{
  margin-top:5px;
  color:rgba(255,255,255,.68);
  font-size:12.5px;
  line-height:1.35;
}

.toast-code{
  margin-top:10px;
  max-width:100%;
  overflow:auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color: rgba(255,255,255,.90);
  background: rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.10);
  padding:8px 10px;
  border-radius: 12px;
  letter-spacing:.6px;
  width: fit-content;
}

.toast-right{
  display:flex;
  gap:8px;
  align-items:flex-start;
}

.toast .icon-btn{
  width:34px;
  height:34px;
  padding:0;
  border-radius:12px;
  background: rgba(255,255,255,.055);
}

.toast .btn.tiny{
  padding:8px 10px;
  border-radius:12px;
}

.toast-timer{
  position:absolute;
  left:12px;
  right:12px;
  bottom:8px;
  height:3px;
  border-radius:999px;
  overflow:hidden;
  background: rgba(255,255,255,.08);
}

.toast-timer-bar{
  height:100%;
  width:100%;
  transform-origin:left;
  background: linear-gradient(90deg, rgba(123,182,255,.98), rgba(106,125,255,.72), rgba(255,255,255,.74));
  box-shadow: 0 0 18px rgba(123,182,255,.42);
  transform: scaleX(1);
}

@keyframes toastbar{
  from{transform:scaleX(1)}
  to{transform:scaleX(0)}
}

@media (max-width: 560px){
  .toast,
  body[data-sidebar-position="left"] .toast{
    left:14px;
    right:14px;
    width:auto;
  }
}