/**
 * ============================================
 * SoulOS — The Operating System of Your Soul
 * ============================================
 * @file       notify.css
 * @version    2.0.0 — Dark/Gold theme
 * @company    Kohli Media LLP
 * @author     Dr. Sahil Kohli
 * @copyright  2026 Kohli Media LLP. All rights reserved.
 * ============================================
 */

/* MayaUI — Notify — SoulOS Dark Theme */
.mui-notice-stack {
  position: fixed;
  right: 16px;
  top: 16px;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(360px, calc(100vw - 24px));
}

.mui-notice {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 26px;
  gap: 10px;
  align-items: start;
  border-radius: 12px;
  border: 1px solid #1e1e1e;
  background: #111111;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255,255,255,0.03);
  padding: 12px;
  animation: mui-in 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.mui-notice.is-leaving {
  opacity: 0;
  transform: translateY(-6px) scale(0.97);
  transition: all 0.18s ease;
}

/* Left accent stripe by type */
.mui-notice--success { border-left: 3px solid #f59e0b; }   /* gold — SoulOS brand */
.mui-notice--error   { border-left: 3px solid #f87171; }   /* red */
.mui-notice--warning { border-left: 3px solid #fb923c; }   /* orange */
.mui-notice--info    { border-left: 3px solid #60a5fa; }   /* blue */

/* Icon bubble */
.mui-notice-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.mui-notice--success .mui-notice-icon { background: rgba(245,158,11,0.12); color: #f59e0b; }
.mui-notice--error   .mui-notice-icon { background: rgba(239,68,68,0.1);   color: #f87171; }
.mui-notice--warning .mui-notice-icon { background: rgba(249,115,22,0.1);  color: #fb923c; }
.mui-notice--info    .mui-notice-icon { background: rgba(96,165,250,0.1);  color: #60a5fa; }

/* Text */
.mui-notice-content { min-width: 0; padding-top: 1px; }
.mui-notice-title {
  font-family: 'Inter', 'Poppins', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: #efefef;
  margin: 0 0 3px;
  letter-spacing: -0.01em;
}
.mui-notice-message {
  font-family: 'Inter', 'Poppins', sans-serif;
  font-size: 0.74rem;
  color: #9a9a9a;
  line-height: 1.45;
  word-wrap: break-word;
}

/* Close button */
.mui-notice-close {
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  border-radius: 6px;
  color: #5a5a5a;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s;
  flex-shrink: 0;
}
.mui-notice-close:hover { background: rgba(255,255,255,0.06); color: #9a9a9a; }

/* Action buttons (for confirm-style notifies) */
.mui-notice-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.mui-notice-btn {
  min-height: 30px;
  border-radius: 7px;
  border: 1px solid #2a2a2a;
  background: #1a1a1a;
  color: #efefef;
  font-family: 'Inter', 'Poppins', sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0 12px;
  cursor: pointer;
  transition: all 0.12s;
}
.mui-notice-btn:hover { background: #222; border-color: #333; }
.mui-notice-btn--solid {
  background: #f59e0b;
  border-color: #f59e0b;
  color: #000;
}
.mui-notice-btn--solid:hover { background: #fbbf24; border-color: #fbbf24; }
.mui-notice-btn--ghost {
  background: transparent;
  border-color: #2a2a2a;
  color: #9a9a9a;
}

@keyframes mui-in {
  from { opacity: 0; transform: translateY(-10px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)     scale(1); }
}
