/* ══════════════════════════════════════════════════════════════
   messages.css  |  Toast Notification System
   PES University Research Portal
   ══════════════════════════════════════════════════════════════ */

/* ── Stack container ── */
#msg-stack {
  position: fixed;
  top: calc(var(--header-h, 72px) + 1rem);
  right: 1.25rem;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: .65rem;
  max-width: 370px;
  width: calc(100vw - 2.5rem);
  pointer-events: none;       /* let clicks pass through the gap areas */
}

/* ── Individual toast ── */
.msg-toast {
  background: #ffffff;
  border: 1.5px solid #f0f0fd;
  border-left: 4px solid var(--_accent);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .9rem 1rem .8rem;
  position: relative;
  overflow: hidden;
  pointer-events: all;
  animation: msgIn .38s cubic-bezier(.22,.61,.36,1) both;
}

.msg-toast.msg-out {
  animation: msgOut .3s ease forwards;
}

/* ── Semantic colour tokens ── */
.msg-success {
  --_accent:    #22c55e;
  --_icon-bg:   rgba(34, 197, 94, .12);
  --_icon-clr:  #16a34a;
}
.msg-danger {
  --_accent:    #ef4444;
  --_icon-bg:   rgba(239, 68, 68, .12);
  --_icon-clr:  #dc2626;
}
.msg-warning {
  --_accent:    #f59e0b;
  --_icon-bg:   rgba(245, 158, 11, .12);
  --_icon-clr:  #b45309;
}
.msg-info {
  --_accent:    var(--brand-blue-light);
  --_icon-bg:   rgba(97, 185, 240, .12);
  --_icon-clr:  var(--brand-navy);
}
[data-theme="dark"] .msg-warning { --_icon-clr: #fbbf24; }
[data-theme="dark"] .msg-info    { --_icon-clr: var(--brand-blue-light); }

/* ── Icon bubble ── */
.msg-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--_icon-bg);
  /* background: #f0f0ed; */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--_icon-clr);
  flex-shrink: 0;
  margin-top: .05rem;
}

/* ── Text area ── */
.msg-body { flex: 1; min-width: 0; }

.msg-label {
  font-family: var(--font-title);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--_accent);
  margin-bottom: .18rem;
  line-height: 1;
}

.msg-text {
  font-family: var(--font-body);
  font-size: .875rem;
  color: #1a1a1a;
  line-height: 1.5;
  word-break: break-word;
}

/* ── Close button ── */
.msg-close {
  background: none;
  border: none;
  color: #666;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  margin-top: .1rem;
  transition: color .2s, transform .2s;
}
.msg-close:hover {
  color: #1a1a1a;
  transform: scale(1.15);
}

/* ── Timer progress bar ── */
.msg-timer-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2.5px;
  width: 100%;
  background: var(--_accent);
  opacity: .55;
  border-radius: 0 0 0 0;
  transform-origin: left;
}

/* ── Animations ── */
@keyframes msgIn {
  from {
    transform: translateX(calc(100% + 1.5rem));
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes msgOut {
  to {
    transform: translateX(calc(100% + 1.5rem));
    opacity: 0;
  }
}

/* ── Mobile ── */
@media (max-width: 480px) {
  #msg-stack {
    right: .75rem;
    left: .75rem;
    width: auto;
    max-width: none;
  }
}