/* ============================================================
   DS Toast — floating success/error/info notifications
   ------------------------------------------------------------
   Replaces the old full-width inline banner that pushed page
   content down. Purely presentational: still reads the exact
   same Flask flash() categories (success / error / info), just
   renders them as a professional floating toast instead.
   Theme-agnostic — uses the shared CSS variables every theme
   already defines, so it matches every theme automatically.
   ============================================================ */

.ds-toast-stack{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:9998;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  width:min(92vw,320px);
  pointer-events:none;
}
.ds-toast{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:8px;
  width:100%;
  background:var(--surface,#fff);
  border:1px solid var(--line,#dde3ee);
  border-radius:16px;
  box-shadow:0 24px 60px rgba(15,35,75,.22);
  padding:20px 20px 16px;
  font-size:12.5px;
  font-weight:700;
  color:var(--text,#183327);
  opacity:0;
  transform:scale(.9);
  transition:opacity .2s ease,transform .2s cubic-bezier(.34,1.56,.64,1);
  /* غير تفاعلي عمدًا: البوب اب في منتصف الشاشة، فلو بقي قابلاً لاستقبال
     أحداث الفأرة يمكن يتوقف عن الاختفاء إذا استقر المؤشر فوقه بالصدفة. */
  pointer-events:none;
}
.ds-toast-close{pointer-events:auto}
.ds-toast.show{opacity:1;transform:scale(1)}
.ds-toast.hide{opacity:0;transform:scale(.92)}

.ds-toast-icon{
  width:38px;height:38px;flex:0 0 38px;
  border-radius:50%;display:grid;place-items:center;
  color:#fff;font-size:18px;font-weight:800;line-height:1;
}
.ds-toast-icon::before{content:"";}
.ds-toast-success .ds-toast-icon{background:#1a7b4d}
.ds-toast-success .ds-toast-icon::before{content:"\2713"}
.ds-toast-error .ds-toast-icon{background:#b94549}
.ds-toast-error .ds-toast-icon::before{content:"!"}
.ds-toast-info .ds-toast-icon{background:#4f65a7}
.ds-toast-info .ds-toast-icon::before{content:"i"}

.ds-toast-msg{line-height:1.6}

.ds-toast-close{
  position:absolute;top:8px;left:8px;
  background:transparent;border:0;font-size:16px;line-height:1;
  color:var(--muted,#6f7f76);cursor:pointer;padding:2px;
}
.ds-toast-close:hover{color:var(--text,#183327)}

.ds-toast-progress{
  position:absolute;bottom:0;right:0;left:0;height:3px;
  background:currentColor;opacity:.35;
  transform-origin:right;
  animation:ds-toast-shrink 1.5s linear forwards;
}
.ds-toast-success .ds-toast-progress{color:#1a7b4d}
.ds-toast-error .ds-toast-progress{color:#b94549}
.ds-toast-info .ds-toast-progress{color:#4f65a7}
@keyframes ds-toast-shrink{from{transform:scaleX(1)}to{transform:scaleX(0)}}

@media (max-width:680px){
  .ds-toast-stack{width:min(90vw,300px)}
}
@media (prefers-reduced-motion: reduce){
  .ds-toast{transition:none}
  .ds-toast-progress{animation:none}
}