/* styles/notifications.css — Toast presentation */
:root{
  --toast-z: 1700;
  --toast-gap: 12px;
  --toast-pad-y: .75rem;
  --toast-pad-x: 1rem;
  --toast-radius: 12px;
  --toast-shadow: 0 10px 30px rgba(0,0,0,.15);
  --toast-maxw: 460px;

  --toast-bg: var(--panel-bg-color, rgba(255,255,255,.92));
  --toast-fg: var(--text-color, #111827);
  --toast-border: var(--border-color, #e5e7eb);
  --toast-muted: var(--muted, #6b7280);

  --toast-success: #10b981;
  --toast-error:   #ef4444;
  --toast-info:    #6366f1;
  --toast-warn:    #f59e0b;
}

body.dark-mode :root,
:root.dark {
  --toast-bg: rgba(30,32,36,.92);
  --toast-fg: #e5e7eb;
  --toast-border: rgba(255,255,255,.08);
  --toast-muted: #9ca3af;
}

.toast-stack{
  position: fixed;
  inset: auto 20px 18px auto;
  z-index: var(--toast-z);
  display: flex;
  flex-direction: column-reverse;
  gap: var(--toast-gap);
  pointer-events: none;
}

.toast{
  pointer-events: auto;
  display: grid;
  grid-template-columns: 8px 1fr auto;
  align-items: center;
  gap: .75rem;
  padding: var(--toast-pad-y) var(--toast-pad-x);
  border-radius: var(--toast-radius);
  border: 1px solid var(--toast-border);
  background: var(--toast-bg);
  color: var(--toast-fg);
  box-shadow: var(--toast-shadow);
  min-width: 280px;
  max-width: var(--toast-maxw);
  transform: translateY(8px);
  opacity: 0;
  animation: toast-in .18s ease-out forwards;
}

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

.toast__bar{
  width: 8px; height: 100%;
  border-radius: 6px;
  background: var(--toast-info);
}
.toast--success .toast__bar{ background: var(--toast-success); }
.toast--error   .toast__bar{ background: var(--toast-error); }
.toast--warn    .toast__bar{ background: var(--toast-warn); }
.toast--info    .toast__bar{ background: var(--toast-info); }

.toast__body{ display: grid; gap: .25rem; }
.toast__title{ font-weight: 700; }
.toast__msg{ font-size: .95em; color: var(--toast-muted); }

.toast__close{
  border: none; background: transparent; color: inherit;
  opacity: .6; border-radius: 8px; padding: .25rem .4rem; cursor: pointer;
}
.toast__close:hover{ opacity: 1; }

.toast__progress{
  grid-column: 1/ -1;
  height: 3px; margin-top: .5rem;
  background: var(--toast-border);
  border-radius: 999px; overflow: hidden;
}
.toast__progress > i{
  display: block; height: 100%; width: 0%;
  background: currentColor; opacity: .9;
  transition: width .15s linear;
}

@media (max-width: 640px){
  .toast-stack{
    right: 50%;
    transform: translateX(50%);
    align-items: center;
  }
  .toast{ width: min(92vw, 360px); }
}