/* ─── feature-undo.css ──────────────────────────────────────────
   Undoable destructive-action toast + world-class empty inbox CTA.
   Scoped here so the color-token agent can edit base/components
   without conflicts.
   Project rules respected: no transition:all, no translateY hover,
   no gradient buttons, 4px spacing grid, 44px min touch target.
─────────────────────────────────────────────────────────────── */

/* ── Toast-with-Undo stack ─────────────────────────────────── */
#toast-undo-stack{
  position:fixed;
  bottom:calc(20px + var(--safe-b, 0px));
  left:50%;
  transform:translateX(-50%);
  z-index:10000;
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
  pointer-events:none;
  width:auto;
  max-width:calc(100vw - 32px);
}

.toast-undo{
  pointer-events:auto;
  display:flex;
  align-items:center;
  gap:var(--space-3);
  min-width:280px;
  max-width:420px;
  padding:var(--space-3) var(--space-4);
  background:var(--surface-elevated, var(--bg2, #1a1d26));
  color:var(--text, #e2e4e8);
  border:1px solid var(--border, rgba(255,255,255,.08));
  border-radius:var(--radius-md, 12px);
  box-shadow:var(--shadow-lg, 0 12px 32px rgba(0,0,0,.32));
  font-size:var(--fs-sm);
  font-weight:500;
  opacity:0;
  transform:translateY(12px);
  transition:opacity .25s cubic-bezier(.4,0,.2,1), transform .25s cubic-bezier(.4,0,.2,1);
  position:relative;
  overflow:hidden;
}
.toast-undo.show{
  opacity:1;
  transform:translateY(0);
}

.toast-undo-msg{
  flex:1;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1.4;
}

.toast-undo-btn{
  flex:none;
  min-height:32px;
  padding:var(--space-1) var(--space-3);
  background:transparent;
  color:var(--brand);
  border:1px solid transparent;
  border-radius:var(--radius-sm);
  font-size:var(--fs-sm);
  font-weight:600;
  cursor:pointer;
  text-transform:none;
  letter-spacing:.01em;
  transition:background-color .15s ease, color .15s ease;
}
.toast-undo-btn:hover{
  background:var(--brand-10, rgba(79,125,245,.1));
  color:var(--brand);
}
.toast-undo-btn:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
}
.toast-undo-btn:active{
  background:var(--brand-15, rgba(79,125,245,.15));
}

.toast-undo-progress{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:2px;
  background:transparent;
  pointer-events:none;
}
.toast-undo-progress-fill{
  height:100%;
  width:100%;
  background:var(--brand);
  transform-origin:left center;
  animation-name:toast-undo-countdown;
  animation-timing-function:linear;
  animation-fill-mode:forwards;
}
@keyframes toast-undo-countdown{
  from{transform:scaleX(1)}
  to{transform:scaleX(0)}
}

/* Mobile tap targets — bump button height on small screens. */
@media (max-width:640px){
  .toast-undo{
    min-width:0;
    width:calc(100vw - 32px);
    max-width:none;
  }
  .toast-undo-btn{
    min-height:44px;
    padding:var(--space-2) var(--space-4);
  }
}

/* ── Empty Inbox CTA ───────────────────────────────────────── */
.empty-inbox-cta{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:var(--space-12) var(--space-6);
  gap:var(--space-2);
  color:var(--text, #e2e4e8);
}

.empty-inbox-cta-icon{
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text, #e2e4e8);
  opacity:.3;
  margin-bottom:var(--space-2);
}
.empty-inbox-cta-icon svg{
  width:48px;
  height:48px;
  display:block;
}

.empty-inbox-cta-title{
  margin:0 0 var(--space-2);
  font-size:var(--fs-lg);
  font-weight:600;
  color:var(--text, #e2e4e8);
  line-height:1.3;
  letter-spacing:-.01em;
}

.empty-inbox-cta-sub{
  margin:0 0 var(--space-4);
  font-size:var(--fs-sm);
  color:var(--text3, #9ba1ae);
  line-height:1.4;
  max-width:280px;
}

.empty-inbox-cta-btn{
  min-height:44px;
  padding:var(--space-2) var(--space-4);
  background:var(--brand);
  color:#ffffff;
  border:1px solid var(--brand);
  border-radius:var(--radius-sm);
  font-size:var(--fs-sm);
  font-weight:600;
  cursor:pointer;
  letter-spacing:.01em;
  transition:background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.empty-inbox-cta-btn:hover{
  background:var(--brand-hover, var(--brand));
  border-color:var(--brand-hover, var(--brand));
}
.empty-inbox-cta-btn:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
}
.empty-inbox-cta-btn:active{
  background:var(--brand-hover, var(--brand));
  box-shadow:inset 0 1px 2px rgba(0,0,0,.15);
}

.empty-inbox-cta-link{
  min-height:44px;
  margin-top:var(--space-1);
  padding:var(--space-2) var(--space-4);
  background:transparent;
  color:var(--brand);
  border:1px solid transparent;
  border-radius:var(--radius-sm);
  font-size:var(--fs-sm);
  font-weight:500;
  cursor:pointer;
  text-decoration:none;
  transition:background-color .15s ease, color .15s ease;
}
.empty-inbox-cta-link:hover{
  background:var(--brand-10, rgba(79,125,245,.1));
}
.empty-inbox-cta-link:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
}
.empty-inbox-cta-link:active{
  background:var(--brand-15, rgba(79,125,245,.15));
}