.niriv-alert-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
display: grid;
place-items: center;
z-index: 10000;
opacity: 0;
visibility: hidden;
transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.niriv-alert-overlay.show {
opacity: 1;
visibility: visible;
} .niriv-alert {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: saturate(180%) blur(8px);
-webkit-backdrop-filter: saturate(180%) blur(8px);
border-radius: 12px;
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15), 0 8px 25px rgba(0, 0, 0, 0.1);
width: min(400px, 90vw);
max-width: 400px;
transform: scale(0.8) translateY(20px);
opacity: 0;
transition: all 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
border: 1px solid rgba(255, 255, 255, 0.2);
overflow: hidden;
}
.niriv-alert-overlay.show .niriv-alert {
transform: scale(1) translateY(0);
opacity: 1;
} .niriv-alert-header {
padding: 20px 20px 16px;
text-align: center;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.niriv-alert-icon {
width: 48px;
height: 48px;
margin: 0 auto 12px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: 600;
}
.niriv-alert-icon.info {
background: rgba(24, 71, 234, 0.1);
color: #1847ea;
}
.niriv-alert-icon.success {
background: rgba(52, 199, 89, 0.1);
color: #34c759;
}
.niriv-alert-icon.warning {
background: rgba(255, 149, 0, 0.1);
color: #ff9500;
}
.niriv-alert-icon.error {
background: rgba(255, 59, 48, 0.1);
color: #ff3b30;
}
.niriv-alert-title {
font-size: 15px;
font-weight: 600;
color: #1d1d1f;
margin: 0 0 6px;
letter-spacing: -0.022em;
}
.niriv-alert-message {
font-size: 13px;
color: #6d6d70;
line-height: 1.4;
margin: 0;
} .niriv-alert-body {
padding: 0 20px 20px;
}
.niriv-alert-input {
width: 100%;
padding: 12px 16px;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 12px;
background: rgba(142, 142, 147, 0.12);
font-size: 15px;
color: #1d1d1f;
transition: all 200ms ease;
outline: none;
}
.niriv-alert-input:focus {
border-color: #1847ea;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 0 0 3px rgba(24, 71, 234, 0.1);
}
.niriv-alert-input::placeholder {
color: #8e8e93;
} .niriv-alert-actions {
display: flex;
border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.niriv-alert-button {
flex: 1;
padding: 13px 13px 13px;
border: none;
background: transparent;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 200ms ease;
color: #1847ea;
}
.niriv-alert-button:hover {
background: rgba(24, 71, 234, 0.05);
}
.niriv-alert-button:active {
background: rgba(24, 71, 234, 0.1);
transform: scale(0.98);
}
.niriv-alert-button.primary {
background: #1847ea;
color: #ffffff;
font-weight: 600;
border-radius: 0 0 12px 12px;
}
.niriv-alert-button.primary:hover {
background: #0f2db8;
}
.niriv-alert-button.secondary {
color: #6d6d70;
}
.niriv-alert-button.secondary:hover {
background: rgba(142, 142, 147, 0.1);
color: #1d1d1f;
}
.niriv-alert-button.destructive {
color: #ff3b30;
}
.niriv-alert-button.destructive:hover {
background: rgba(255, 59, 48, 0.05);
} .niriv-alert-actions .niriv-alert-button + .niriv-alert-button {
border-left: 1px solid rgba(0, 0, 0, 0.06);
} .niriv-alert-actions.single-button .niriv-alert-button {
border-radius: 0 0 12px 12px;
} .niriv-toast-container {
position: fixed;
top: 20px;
right: 20px;
z-index: 10001;
display: flex;
flex-direction: column;
gap: 12px;
pointer-events: none;
}
.niriv-toast {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
border-radius: 12px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
padding: 16px 20px;
min-width: 300px;
max-width: 400px;
transform: translateX(100%);
opacity: 0;
transition: all 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
border: 1px solid rgba(255, 255, 255, 0.2);
pointer-events: auto;
cursor: pointer;
}
.niriv-toast.show {
transform: translateX(0);
opacity: 1;
}
.niriv-toast-content {
display: flex;
align-items: flex-start;
gap: 12px;
}
.niriv-toast-icon {
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 600;
flex-shrink: 0;
margin-top: 2px;
}
.niriv-toast-text {
flex: 1;
}
.niriv-toast-title {
font-size: 15px;
font-weight: 600;
color: #1d1d1f;
margin: 0 0 4px;
}
.niriv-toast-message {
font-size: 14px;
color: #6d6d70;
line-height: 1.4;
margin: 0;
}
.niriv-toast-close {
width: 20px;
height: 20px;
border: none;
background: rgba(142, 142, 147, 0.12);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 12px;
color: #8e8e93;
transition: all 200ms ease;
flex-shrink: 0;
}
.niriv-toast-close:hover {
background: rgba(142, 142, 147, 0.2);
color: #1d1d1f;
} .niriv-toast.info .niriv-toast-icon {
background: rgba(24, 71, 234, 0.1);
color: #1847ea;
}
.niriv-toast.success .niriv-toast-icon {
background: rgba(52, 199, 89, 0.1);
color: #34c759;
}
.niriv-toast.warning .niriv-toast-icon {
background: rgba(255, 149, 0, 0.1);
color: #ff9500;
}
.niriv-toast.error .niriv-toast-icon {
background: rgba(255, 59, 48, 0.1);
color: #ff3b30;
} @media (max-width: 640px) {
.niriv-alert {
width: min(340px, 90vw);
margin: 20px;
}
.niriv-toast-container {
top: 10px;
right: 10px;
left: 10px;
}
.niriv-toast {
min-width: auto;
max-width: none;
}
} @media (prefers-reduced-motion: reduce) {
.niriv-alert-overlay,
.niriv-alert,
.niriv-toast,
.niriv-alert-button {
transition: opacity 200ms ease, visibility 200ms ease;
}
.niriv-alert {
transform: none;
}
.niriv-toast {
transform: none;
}
}