ga-toasts 1.0.0 → 2.0.0

package/src/toasts.css

@@ -1,1644 +0,0 @@
-/**
- * Modernized Toast notification styles for Genie AI Plugin
- * Enhanced with modern CSS features, better animations, and improved UX
- */
-
-/* Toast CSS Variables - Enhanced */
-:root {
-    /* Toast Progress Background Colors */
-    --ga-primary-rgb: 0, 115, 170;
-    --ga-success-rgb: 0, 163, 42;
-    --ga-error-rgb: 214, 54, 56;
-    --ga-warning-rgb: 219, 166, 23;
-    --ga-info-rgb: 114, 174, 230;
-    --ga-secondary-rgb: 108, 117, 125;
-    
-    /* Toast Animation Durations */
-    --ga-toast-duration-fast: 150ms;
-    --ga-toast-duration-normal: 300ms;
-    --ga-toast-duration-slow: 500ms;
-    
-    /* Toast Blur Effects */
-    --ga-toast-blur-light: blur(10px);
-    --ga-toast-blur-medium: blur(20px);
-    --ga-toast-blur-heavy: blur(30px);
-    
-    /* Toast Opacity Levels */
-    --ga-toast-opacity-light: 0.1;
-    --ga-toast-opacity-medium: 0.2;
-    --ga-toast-opacity-heavy: 0.3;
-}
-
-/* Toast Container */
-.ga-toast-container {
-    position: fixed;
-    z-index: var(--ga-z-toast);
-    pointer-events: none;
-    max-width: 100vw;
-    max-height: 100vh;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    gap: var(--ga-space-2);
-}
-
-/* Toast Container Positions */
-.ga-toast-container-top-start {
-    top: var(--ga-space-lg);
-    left: var(--ga-space-lg);
-}
-
-.ga-toast-container-top-center {
-    top: var(--ga-space-lg);
-    left: 50%;
-    transform: translateX(-50%);
-}
-
-.ga-toast-container-top-end {
-    top: var(--ga-space-10);
-    right: var(--ga-space-lg);
-}
-
-.ga-toast-container-middle-start {
-    top: 50%;
-    left: var(--ga-space-lg);
-    transform: translateY(-50%);
-}
-
-.ga-toast-container-middle-center {
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-}
-
-.ga-toast-container-middle-end {
-    top: 50%;
-    right: var(--ga-space-lg);
-    transform: translateY(-50%);
-}
-
-.ga-toast-container-bottom-start {
-    bottom: var(--ga-space-lg);
-    left: var(--ga-space-lg);
-}
-
-.ga-toast-container-bottom-center {
-    bottom: var(--ga-space-lg);
-    left: 50%;
-    transform: translateX(-50%);
-}
-
-.ga-toast-container-bottom-end {
-    bottom: var(--ga-space-lg);
-    right: var(--ga-space-lg);
-}
-
-/* Toast Base Styles - Modernized */
-.ga-toast {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    width: 380px;
-    max-width: 100%;
-    padding: var(--ga-space-3) var(--ga-space-4);
-    margin-bottom: var(--ga-space-md);
-    color: var(--ga-text-primary);
-    background: linear-gradient(135deg, var(--ga-bg-primary), var(--ga-bg-secondary));
-    background-clip: padding-box;
-    border: var(--ga-border-1) solid var(--ga-border-light);
-    border-radius: var(--ga-radius-xl);
-    box-shadow: none;
-    opacity: 0;
-    transform: translateX(100%) scale(0.95);
-    transition: 
-        opacity var(--ga-duration-300) var(--ga-ease-out),
-        transform var(--ga-duration-300) var(--ga-ease-bounce),
-        box-shadow var(--ga-duration-150) var(--ga-ease-out);
-    pointer-events: auto;
-    font-family: var(--ga-font-sans);
-    font-size: var(--ga-text-sm);
-    line-height: var(--ga-leading-relaxed);
-    word-wrap: break-word;
-    overflow-wrap: break-word;
-    backdrop-filter: var(--ga-bg-blur);
-    isolation: isolate;
-    /* Ensure inner elements like progress bar stay visually inside rounded corners */
-    overflow: hidden;
-    /* Enable smoother font rendering for crisper text */
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    text-rendering: optimizeLegibility;
-    /* Allow horizontal swipe while keeping vertical scroll natural */
-    touch-action: pan-y;
-}
-
-.ga-toast::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background: inherit;
-    border-radius: inherit;
-    filter: blur(20px);
-    opacity: 0.6;
-    z-index: -1;
-    transform: scale(1.1);
-}
-
-.ga-toast:hover {
-    box-shadow: none;
-    transform: translateY(-2px);
-}
-
-/* Toast Show/Hide States */
-.ga-toast.show,
-.ga-toast.ga-show {
-    opacity: 1;
-    transform: translateX(0) scale(1);
-}
-
-.ga-toast.hide,
-.ga-toast.ga-hide {
-    opacity: 0;
-    transform: translateX(100%) scale(0.9);
-    transition: 
-        opacity var(--ga-duration-200) var(--ga-ease-in),
-        transform var(--ga-duration-200) var(--ga-ease-in);
-}
-
-.ga-toast:last-child {
-    margin-bottom: 0;
-}
-
-/* Toast Header */
-.ga-toast-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-    margin-bottom: var(--ga-space-2);
-    padding-right: var(--ga-space-8);
-}
-
-.ga-toast-header-left {
-    display: flex;
-    align-items: center;
-    flex-grow: 1;
-    gap: var(--ga-space-3);
-}
-
-.ga-toast-title {
-    margin: 0;
-    font-size: var(--ga-text-base);
-    font-weight: var(--ga-font-semibold);
-    color: var(--ga-text-primary);
-    flex: 1;
-    min-width: 0;
-    background: linear-gradient(135deg, var(--ga-text-primary), var(--ga-text-secondary));
-    background-clip: text;
-    -webkit-background-clip: text;
-    letter-spacing: var(--ga-tracking-tight);
-}
-
-.ga-toast-title-truncate {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.ga-toast-status {
-    margin-left: var(--ga-space-3);
-    padding: var(--ga-space-1) var(--ga-space-2);
-    border-radius: var(--ga-radius-full);
-    font-size: var(--ga-text-2xs);
-    text-transform: uppercase;
-    letter-spacing: var(--ga-tracking-wide);
-    background: var(--ga-bg-tertiary);
-    color: var(--ga-text-secondary);
-    flex-shrink: 0;
-}
-
-.ga-toast-time {
-    font-size: var(--ga-text-xs);
-    color: var(--ga-text-muted);
-    flex-shrink: 0;
-    font-weight: var(--ga-font-medium);
-    padding: var(--ga-space-1) var(--ga-space-2);
-    background: var(--ga-bg-tertiary);
-    border-radius: var(--ga-radius-md);
-    font-variant-numeric: tabular-nums;
-}
-
-/* Toast Body */
-.ga-toast-body {
-    flex: 1;
-    padding: 0;
-    /* Slightly softer body text for better hierarchy under the title */
-    color: var(--ga-text-secondary);
-    min-width: 0;
-    padding-right: var(--ga-space-8);
-    line-height: var(--ga-leading-relaxed);
-}
-
-.ga-toast-message {
-    margin: 0;
-}
-
-.ga-toast-meta {
-    font-size: var(--ga-text-xs);
-    color: var(--ga-text-muted);
-    margin-bottom: var(--ga-space-1);
-}
-
-.ga-toast-body:last-child {
-    margin-bottom: 0;
-}
-
-.ga-toast-body p {
-    margin: 0 0 var(--ga-space-1-5) 0;
-}
-
-.ga-toast-body p:last-child {
-    margin-bottom: 0;
-}
-
-.ga-toast-body a {
-    color: var(--ga-primary);
-    text-decoration: underline;
-    font-weight: var(--ga-font-medium);
-}
-
-.ga-toast-body a:hover {
-    text-decoration: none;
-}
-
-.ga-toast-body p:last-child {
-    margin-bottom: 0;
-}
-
-/* Toast Close Button - Modernized */
-.ga-toast-close {
-    position: absolute;
-    top: var(--ga-space-3);
-    right: var(--ga-space-3);
-    z-index: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 32px;
-    height: 32px;
-    padding: 0;
-    margin: 0;
-    color: var(--ga-text-muted);
-    background: rgba(255, 255, 255, 0.1);
-    border: none;
-    font-size: var(--ga-text-lg);
-    font-weight: var(--ga-font-bold);
-    line-height: 1;
-    text-decoration: none;
-    cursor: pointer;
-    border-radius: var(--ga-radius-full);
-    transition: all var(--ga-duration-200) var(--ga-ease-out);
-    flex-shrink: 0;
-    backdrop-filter: blur(10px);
-}
-
-.ga-toast-close:hover {
-    color: var(--ga-text-primary);
-    background: rgba(255, 255, 255, 0.2);
-    transform: scale(1.1);
-}
-
-.ga-toast-close:focus {
-    outline: 2px solid var(--ga-border-focus);
-    outline-offset: 2px;
-}
-
-.ga-toast-close:active {
-    transform: scale(0.95);
-}
-
-.ga-toast-close::before {
-    /* Use a more natural close glyph and rely on flex centering from the button */
-    content: "×";
-    display: block;
-    width: 100%;
-    height: 100%;
-    text-align: center;
-    line-height: 32px;
-    font-size: 16px;
-    margin: 0;
-}
-
-/* Toast Icon - Enhanced */
-.ga-toast-icon {
-    flex-shrink: 0;
-    margin-right: var(--ga-space-3);
-    margin-top: 2px;
-    padding: var(--ga-space-2);
-    border-radius: var(--ga-radius-md);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: rgba(255, 255, 255, 0.1);
-    backdrop-filter: blur(10px);
-}
-
-.ga-toast-icon svg {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-}
-
-/* Toast Content Wrapper */
-.ga-toast-content {
-    flex: 1;
-    min-width: 0;
-}
-
-/* Toast Variants - Enhanced with Modern Gradients */
-.ga-toast-primary {
-    border-left: 4px solid var(--ga-primary);
-    background: linear-gradient(135deg, 
-        var(--ga-primary-light), 
-        rgba(255, 255, 255, 0.9)
-    );
-}
-
-.ga-toast-primary .ga-toast-icon {
-    color: var(--ga-primary);
-    background: linear-gradient(135deg, var(--ga-primary), var(--ga-primary-hover));
-    color: white;
-}
-
-.ga-toast-success {
-    border-left: 4px solid var(--ga-success);
-    background: linear-gradient(135deg, 
-        var(--ga-success-light), 
-        rgba(255, 255, 255, 0.9)
-    );
-}
-
-.ga-toast-success .ga-toast-icon {
-    color: var(--ga-success);
-    background: linear-gradient(135deg, var(--ga-success), var(--ga-success-hover));
-    color: white;
-}
-
-.ga-toast-error {
-    border-left: 4px solid var(--ga-error);
-    background: linear-gradient(135deg, 
-        var(--ga-error-light), 
-        rgba(255, 255, 255, 0.9)
-    );
-}
-
-.ga-toast-error .ga-toast-icon {
-    color: var(--ga-error);
-    background: linear-gradient(135deg, var(--ga-error), var(--ga-error-hover));
-    color: white;
-}
-
-.ga-toast-warning {
-    border-left: 4px solid var(--ga-warning);
-    background: linear-gradient(135deg, 
-        var(--ga-warning-light), 
-        rgba(255, 255, 255, 0.9)
-    );
-}
-
-.ga-toast-warning .ga-toast-icon {
-    color: var(--ga-warning);
-    background: linear-gradient(135deg, var(--ga-warning), var(--ga-warning-hover));
-    color: white;
-}
-
-.ga-toast-info {
-    border-left: 4px solid var(--ga-info);
-    background: linear-gradient(135deg, 
-        var(--ga-info-light), 
-        rgba(255, 255, 255, 0.9)
-    );
-}
-
-.ga-toast-info .ga-toast-icon {
-    color: var(--ga-info);
-    background: linear-gradient(135deg, var(--ga-info), var(--ga-info-hover));
-    color: white;
-}
-
-.ga-toast-secondary {
-    border-left: 4px solid var(--ga-secondary);
-    background: linear-gradient(135deg, 
-        var(--ga-secondary-light), 
-        rgba(255, 255, 255, 0.9)
-    );
-}
-
-.ga-toast-secondary .ga-toast-icon {
-    color: var(--ga-secondary);
-    background: linear-gradient(135deg, var(--ga-secondary), var(--ga-secondary-hover));
-    color: white;
-}
-
-/* Filled Variants - Enhanced */
-.ga-toast-primary-filled {
-    background: linear-gradient(135deg, var(--ga-primary), var(--ga-primary-hover));
-    border-color: var(--ga-primary);
-    color: var(--ga-text-inverse);
-}
-
-.ga-toast-primary-filled .ga-toast-title,
-.ga-toast-primary-filled .ga-toast-body,
-.ga-toast-primary-filled .ga-toast-close {
-    color: var(--ga-text-inverse);
-}
-
-.ga-toast-primary-filled .ga-toast-close:hover {
-    background-color: rgba(255, 255, 255, 0.2);
-}
-
-.ga-toast-success-filled {
-    background: linear-gradient(135deg, var(--ga-success), var(--ga-success-hover));
-    border-color: var(--ga-success);
-    color: var(--ga-text-inverse);
-}
-
-.ga-toast-success-filled .ga-toast-title,
-.ga-toast-success-filled .ga-toast-body,
-.ga-toast-success-filled .ga-toast-close {
-    color: var(--ga-text-inverse);
-}
-
-.ga-toast-success-filled .ga-toast-close:hover {
-    background-color: rgba(255, 255, 255, 0.2);
-}
-
-.ga-toast-error-filled {
-    background: linear-gradient(135deg, var(--ga-error), var(--ga-error-hover));
-    border-color: var(--ga-error);
-    color: var(--ga-text-inverse);
-}
-
-.ga-toast-error-filled .ga-toast-title,
-.ga-toast-error-filled .ga-toast-body,
-.ga-toast-error-filled .ga-toast-close {
-    color: var(--ga-text-inverse);
-}
-
-.ga-toast-error-filled .ga-toast-close:hover {
-    background-color: rgba(255, 255, 255, 0.2);
-}
-
-.ga-toast-warning-filled {
-    background: linear-gradient(135deg, var(--ga-warning), var(--ga-warning-hover));
-    border-color: var(--ga-warning);
-    color: var(--ga-text-inverse);
-}
-
-.ga-toast-warning-filled .ga-toast-title,
-.ga-toast-warning-filled .ga-toast-body,
-.ga-toast-warning-filled .ga-toast-close {
-    color: var(--ga-text-inverse);
-}
-
-.ga-toast-warning-filled .ga-toast-close:hover {
-    background-color: rgba(255, 255, 255, 0.2);
-}
-
-.ga-toast-info-filled {
-    background: linear-gradient(135deg, var(--ga-info), var(--ga-info-hover));
-    border-color: var(--ga-info);
-    color: var(--ga-text-inverse);
-}
-
-.ga-toast-info-filled .ga-toast-title,
-.ga-toast-info-filled .ga-toast-body,
-.ga-toast-info-filled .ga-toast-close {
-    color: var(--ga-text-inverse);
-}
-
-.ga-toast-info-filled .ga-toast-close:hover {
-    background-color: rgba(255, 255, 255, 0.2);
-}
-
-/* Light Variants - Enhanced */
-.ga-toast-primary-light {
-    background: linear-gradient(135deg, 
-        var(--ga-primary-light), 
-        rgba(240, 246, 252, 0.8)
-    );
-    border-color: var(--ga-primary-border);
-    backdrop-filter: blur(20px);
-}
-
-.ga-toast-success-light {
-    background: linear-gradient(135deg, 
-        var(--ga-success-light), 
-        rgba(240, 248, 241, 0.8)
-    );
-    border-color: var(--ga-success-border);
-    backdrop-filter: blur(20px);
-}
-
-.ga-toast-error-light {
-    background: linear-gradient(135deg, 
-        var(--ga-error-light), 
-        rgba(252, 240, 241, 0.8)
-    );
-    border-color: var(--ga-error-border);
-    backdrop-filter: blur(20px);
-}
-
-.ga-toast-warning-light {
-    background: linear-gradient(135deg, 
-        var(--ga-warning-light), 
-        rgba(252, 249, 232, 0.8)
-    );
-    border-color: var(--ga-warning-border);
-    backdrop-filter: blur(20px);
-}
-
-.ga-toast-info-light {
-    background: linear-gradient(135deg, 
-        var(--ga-info-light), 
-        rgba(240, 246, 252, 0.8)
-    );
-    border-color: var(--ga-info-border);
-    backdrop-filter: blur(20px);
-}
-
-/* Toast Sizes */
-.ga-toast-xs {
-    width: 280px;
-    padding: var(--ga-space-3);
-    font-size: var(--ga-text-xs);
-}
-
-.ga-toast-xs .ga-toast-title {
-    font-size: var(--ga-text-sm);
-}
-
-.ga-toast-xs .ga-toast-body {
-    font-size: var(--ga-text-xs);
-}
-
-.ga-toast-xs .ga-toast-icon {
-    width: var(--ga-icon-sm);
-    height: var(--ga-icon-sm);
-    margin-right: var(--ga-space-2);
-}
-
-.ga-toast-sm {
-    width: 320px;
-    padding: var(--ga-space-4);
-}
-
-.ga-toast-sm .ga-toast-title {
-    font-size: var(--ga-text-sm);
-}
-
-.ga-toast-sm .ga-toast-body {
-    font-size: var(--ga-text-sm);
-}
-
-.ga-toast-sm .ga-toast-icon {
-    width: var(--ga-icon-md);
-    height: var(--ga-icon-md);
-}
-
-.ga-toast-lg {
-    width: 480px;
-    padding: var(--ga-space-6);
-}
-
-.ga-toast-lg .ga-toast-title {
-    font-size: var(--ga-text-lg);
-}
-
-.ga-toast-lg .ga-toast-body {
-    font-size: var(--ga-text-base);
-}
-
-.ga-toast-lg .ga-toast-icon {
-    width: var(--ga-icon-xl);
-    height: var(--ga-icon-xl);
-}
-
-.ga-toast-xl {
-    width: 580px;
-    padding: var(--ga-space-8);
-}
-
-.ga-toast-xl .ga-toast-title {
-    font-size: var(--ga-text-xl);
-}
-
-.ga-toast-xl .ga-toast-body {
-    font-size: var(--ga-text-lg);
-}
-
-.ga-toast-xl .ga-toast-icon {
-    width: var(--ga-icon-2xl);
-    height: var(--ga-icon-2xl);
-}
-
-/* Toast Progress Bar - Enhanced */
-.ga-toast-progress {
-    position: absolute;
-    bottom: 0;
-    /* Inset slightly from the toast edges so corners stay visually rounded */
-    right: 2px;
-    height: 3px;
-    width: calc(100% - 4px);
-    background: linear-gradient(90deg, 
-        var(--ga-primary), 
-        var(--ga-primary-hover),
-        var(--ga-primary-light)
-    );
-    /* Fully rounded bar to avoid any squarish edge */
-    border-radius: 999px;
-    transform: scaleX(1);
-    /* Anchor the progress to the right edge so it peeks from the right when stacked */
-    transform-origin: right center;
-    transition: transform linear;
-    z-index: 1;
-    box-shadow: 
-        0 0 8px rgba(0, 115, 170, 0.4),
-        0 0 4px rgba(0, 115, 170, 0.2);
-    overflow: hidden;
-}
-
-.ga-toast-progress-top {
-    top: 0;
-    bottom: auto;
-}
-
-.ga-toast-progress::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: linear-gradient(90deg, 
-        transparent 0%, 
-        rgba(255, 255, 255, 0.3) 50%, 
-        transparent 100%
-    );
-    animation: ga-progress-shimmer 2s infinite;
-    border-radius: inherit;
-}
-
-.ga-toast-progress::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: linear-gradient(90deg, 
-        rgba(255, 255, 255, 0.1) 0%, 
-        rgba(255, 255, 255, 0.4) 50%, 
-        rgba(255, 255, 255, 0.1) 100%
-    );
-    border-radius: inherit;
-}
-
-/* Toast Background Fill - New Feature */
-.ga-toast-background-fill {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    border-radius: inherit;
-    z-index: -1;
-    opacity: 1;
-    transition: opacity linear;
-    pointer-events: none;
-}
-
-.ga-toast-bg-primary {
-    background: rgba(var(--ga-primary-rgb, 0, 115, 170), 0.1);
-}
-
-.ga-toast-bg-success {
-    background: rgba(var(--ga-success-rgb, 0, 163, 42), 0.1);
-}
-
-.ga-toast-bg-error {
-    background: rgba(var(--ga-error-rgb, 214, 54, 56), 0.1);
-}
-
-.ga-toast-bg-warning {
-    background: rgba(var(--ga-warning-rgb, 219, 166, 23), 0.1);
-}
-
-.ga-toast-bg-info {
-    background: rgba(var(--ga-info-rgb, 114, 174, 230), 0.1);
-}
-
-.ga-toast-bg-secondary {
-    background: rgba(var(--ga-secondary-rgb, 108, 117, 125), 0.1);
-}
-
-/* Pause on Hover State */
-.ga-toast-paused .ga-toast-background-fill,
-.ga-toast-paused .ga-toast-progress {
-    animation-play-state: paused;
-    transition: none;
-    transform: scaleX(var(--current-progress, 1)) !important;
-}
-
-.ga-toast-paused {
-    transform: translateY(-1px) scale(1.01);
-    box-shadow: 
-        var(--ga-shadow-lg),
-        0 0 0 1px rgba(255, 255, 255, 0.15) inset,
-        0 1px 0 rgba(255, 255, 255, 0.2) inset;
-}
-
-.ga-toast-paused .ga-toast-progress::before {
-    animation-play-state: paused;
-}
-
-/* Modern Toast Enhancements */
-.ga-toast-modern {
-    backdrop-filter: blur(20px);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-}
-
-.ga-toast-glass {
-    background: rgba(255, 255, 255, 0.1);
-    backdrop-filter: blur(20px);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-}
-
-.ga-toast-progress.ga-toast-progress-primary {
-    background: linear-gradient(90deg, var(--ga-primary), var(--ga-primary-hover), var(--ga-primary-light));
-    box-shadow: 
-        0 0 8px rgba(0, 115, 170, 0.4),
-        0 0 4px rgba(0, 115, 170, 0.2);
-}
-
-.ga-toast-progress.ga-toast-progress-success {
-    background: linear-gradient(90deg, var(--ga-success), var(--ga-success-hover), var(--ga-success-light));
-    box-shadow: 
-        0 0 8px rgba(0, 163, 42, 0.4),
-        0 0 4px rgba(0, 163, 42, 0.2);
-}
-
-.ga-toast-progress.ga-toast-progress-error {
-    background: linear-gradient(90deg, var(--ga-error), var(--ga-error-hover), var(--ga-error-light));
-    box-shadow: 
-        0 0 8px rgba(214, 54, 56, 0.4),
-        0 0 4px rgba(214, 54, 56, 0.2);
-}
-
-.ga-toast-progress.ga-toast-progress-warning {
-    background: linear-gradient(90deg, var(--ga-warning), var(--ga-warning-hover), var(--ga-warning-light));
-    box-shadow: 
-        0 0 8px rgba(219, 166, 23, 0.4),
-        0 0 4px rgba(219, 166, 23, 0.2);
-}
-
-.ga-toast-progress.ga-toast-progress-info {
-    background: linear-gradient(90deg, var(--ga-info), var(--ga-info-hover), var(--ga-info-light));
-    box-shadow: 
-        0 0 8px rgba(114, 174, 230, 0.4),
-        0 0 4px rgba(114, 174, 230, 0.2);
-}
-
-.ga-toast-progress.ga-toast-progress-secondary {
-    background: linear-gradient(90deg, var(--ga-secondary), var(--ga-secondary-hover), var(--ga-secondary-light));
-    box-shadow: 
-        0 0 8px rgba(108, 117, 125, 0.4),
-        0 0 4px rgba(108, 117, 125, 0.2);
-}
-
-/* Toast Actions - Enhanced */
-.ga-toast-actions {
-    display: flex;
-    gap: var(--ga-space-3);
-    margin-top: var(--ga-space-4);
-    padding-top: var(--ga-space-4);
-    border-top: var(--ga-border-1) solid var(--ga-border-light);
-}
-
-.ga-toast-actions .ga-btn {
-    flex: 1;
-    padding: var(--ga-space-2) var(--ga-space-4);
-    font-size: var(--ga-text-sm);
-    font-weight: var(--ga-font-medium);
-    min-width: 0;
-    border-radius: var(--ga-radius-lg);
-    transition: all var(--ga-duration-200) var(--ga-ease-out);
-    backdrop-filter: blur(10px);
-}
-
-.ga-toast-actions .ga-btn:hover {
-    transform: translateY(-1px);
-    box-shadow: var(--ga-shadow-md);
-}
-
-.ga-toast-actions .ga-btn:only-child {
-    flex: none;
-    width: auto;
-    min-width: 100px;
-}
-
-/* Toast Loading - Enhanced */
-.ga-toast-loading {
-    position: relative;
-    pointer-events: none;
-}
-
-.ga-toast-loading::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: linear-gradient(135deg, 
-        rgba(255, 255, 255, 0.9), 
-        rgba(255, 255, 255, 0.7)
-    );
-    border-radius: var(--ga-radius-xl);
-    backdrop-filter: blur(10px);
-    z-index: 1;
-}
-
-.ga-toast-loading::after {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: var(--ga-spinner-lg);
-    height: var(--ga-spinner-lg);
-    margin: calc(var(--ga-spinner-lg) / -2) 0 0 calc(var(--ga-spinner-lg) / -2);
-    border: 3px solid transparent;
-    border-top: 3px solid var(--ga-primary);
-    border-right: 3px solid var(--ga-primary-hover);
-    border-radius: var(--ga-radius-full);
-    animation: ga-spin-modern 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
-    z-index: 2;
-}
-
-/* Enhanced Animation Classes */
-.ga-toast.fade {
-    transition: opacity var(--ga-duration-300) var(--ga-ease-out);
-    transform: none;
-}
-
-.ga-toast.fade.show {
-    opacity: 1;
-}
-
-.ga-toast.fade.hide {
-    opacity: 0;
-}
-
-.ga-toast.slide {
-    transition: 
-        transform var(--ga-duration-300) var(--ga-ease-bounce),
-        opacity var(--ga-duration-300) var(--ga-ease-out);
-}
-
-.ga-toast.slide.show {
-    transform: translateX(0);
-    opacity: 1;
-}
-
-.ga-toast.slide.hide {
-    transform: translateX(100%);
-    opacity: 0;
-}
-
-/* Slide variants for different positions */
-.ga-toast-container-top-start .ga-toast.slide.hide,
-.ga-toast-container-middle-start .ga-toast.slide.hide,
-.ga-toast-container-bottom-start .ga-toast.slide.hide {
-    transform: translateX(-100%);
-}
-
-.ga-toast-container-top-center .ga-toast.slide.hide,
-.ga-toast-container-middle-center .ga-toast.slide.hide,
-.ga-toast-container-bottom-center .ga-toast.slide.hide {
-    transform: translateY(-100%);
-}
-
-.ga-toast.bounce {
-    transition: 
-        transform var(--ga-duration-500) var(--ga-ease-bounce),
-        opacity var(--ga-duration-300) var(--ga-ease-out);
-}
-
-.ga-toast.bounce.show {
-    transform: translateX(0) scale(1);
-    opacity: 1;
-}
-
-.ga-toast.bounce.hide {
-    transform: translateX(100%) scale(0.8);
-    opacity: 0;
-}
-
-.ga-toast.scale {
-    transition: 
-        transform var(--ga-duration-300) var(--ga-ease-bounce),
-        opacity var(--ga-duration-300) var(--ga-ease-out);
-    transform: scale(0.8);
-}
-
-.ga-toast.scale.show {
-    transform: scale(1);
-    opacity: 1;
-}
-
-.ga-toast.scale.hide {
-    transform: scale(0.8);
-    opacity: 0;
-}
-
-/* Toast Stack */
-.ga-toast-stack {
-    display: flex;
-    flex-direction: column;
-    gap: var(--ga-space-3);
-}
-
-.ga-toast-stack .ga-toast {
-    margin-bottom: 0;
-}
-
-.ga-toast-stack .ga-toast:not(:last-child) {
-    transform: scale(0.95) translateY(calc(var(--ga-space-2) * -1));
-    opacity: 0.8;
-}
-
-/* Toast with Image - Enhanced */
-.ga-toast-image {
-    display: block;
-    width: 100%;
-    max-width: 100%;
-    height: auto;
-    margin-bottom: var(--ga-space-3);
-    border-radius: var(--ga-radius-lg);
-    box-shadow: var(--ga-shadow-sm);
-    aspect-ratio: 16/9;
-    object-fit: cover;
-}
-
-/* Toast Compact Layout */
-.ga-toast-compact {
-    padding: var(--ga-space-2) var(--ga-space-3);
-    align-items: center;
-    min-height: auto;
-}
-
-.ga-toast-compact .ga-toast-icon {
-    display: none;
-}
-
-.ga-toast-compact .ga-toast-title,
-.ga-toast-compact .ga-toast-body {
-    color: var(--ga-text-primary);
-}
-
-.ga-toast-compact .ga-toast-close {
-    width: 24px;
-    height: 24px;
-    /* Center close button vertically for tighter compact layout */
-    top: 50%;
-    right: var(--ga-space-3);
-    transform: translateY(-50%);
-}
-
-.ga-toast-compact .ga-toast-close:hover {
-    /* Preserve hover scale while keeping vertical centering */
-    transform: translateY(-50%) scale(1.1);
-}
-
-.ga-toast-compact .ga-toast-close:active {
-    transform: translateY(-50%) scale(0.95);
-}
-
-.ga-toast-compact .ga-toast-close::before {
-    /* Adjust glyph alignment to the smaller button size */
-    line-height: 24px;
-    font-size: 14px;
-}
-
-/* Segmented steps indicator */
-.ga-toast-steps {
-    display: flex;
-    gap: 4px;
-    margin-top: var(--ga-space-2);
-}
-
-.ga-toast-step {
-    flex: 1;
-    height: 3px;
-    border-radius: var(--ga-radius-full);
-    background: var(--ga-bg-tertiary);
-}
-
-.ga-toast-step-active {
-    background: var(--ga-primary);
-}
-
-.ga-toast-compact .ga-toast-header {
-    margin-bottom: 0;
-}
-
-.ga-toast-compact .ga-toast-body {
-    padding-right: var(--ga-space-8);
-    /* Ensure message text starts from the left and stays single-line friendly */
-    text-align: left;
-}
-
-.ga-toast-unread-dot {
-    width: 8px;
-    height: 8px;
-    border-radius: var(--ga-radius-full);
-    background: var(--ga-primary);
-    flex-shrink: 0;
-    margin-left: var(--ga-space-1);
-}
-
-.ga-toast-success .ga-toast-status {
-    background: rgba(var(--ga-success-rgb, 0, 163, 42), 0.14);
-    color: var(--ga-success);
-}
-
-.ga-toast-error .ga-toast-status {
-    background: rgba(var(--ga-error-rgb, 214, 54, 56), 0.14);
-    color: var(--ga-error);
-}
-
-.ga-toast-warning .ga-toast-status {
-    background: rgba(var(--ga-warning-rgb, 219, 166, 23), 0.18);
-    color: var(--ga-warning);
-}
-
-.ga-toast-info .ga-toast-status {
-    background: rgba(var(--ga-info-rgb, 114, 174, 230), 0.18);
-    color: var(--ga-info);
-}
-
-.ga-toast-secondary .ga-toast-status {
-    background: rgba(var(--ga-secondary-rgb, 108, 117, 125), 0.18);
-    color: var(--ga-secondary);
-}
-
-.ga-toast-compact .ga-toast-icon {
-    margin-top: 0;
-    margin-right: var(--ga-space-3);
-}
-
-/* Toast with Avatar - Enhanced */
-.ga-toast-avatar {
-    width: var(--ga-avatar-sm);
-    height: var(--ga-avatar-sm);
-    border-radius: var(--ga-radius-full);
-    margin-right: var(--ga-space-3);
-    margin-top: 2px;
-    flex-shrink: 0;
-    border: 2px solid rgba(255, 255, 255, 0.2);
-    box-shadow: var(--ga-shadow-sm);
-}
-
-/* Dark mode adjustments */
-[data-ga-theme="dark"] .ga-toast,
-[data-hp-theme-mode="dark"] .ga-toast {
-    background: linear-gradient(135deg, 
-        var(--ga-bg-primary), 
-        var(--ga-bg-secondary)
-    );
-}
-
-[data-ga-theme="dark"] .ga-toast-loading::before,
-[data-hp-theme-mode="dark"] .ga-toast-loading::before {
-    background: linear-gradient(135deg, 
-        rgba(0, 0, 0, 0.9), 
-        rgba(0, 0, 0, 0.7)
-    );
-}
-
-[data-ga-theme="dark"] .ga-toast-close:hover,
-[data-hp-theme-mode="dark"] .ga-toast-close:hover {
-    background-color: var(--ga-gray-700);
-}
-
-/* Keyframe Animations - Enhanced */
-@keyframes ga-spin {
-    0% {
-        transform: rotate(0deg);
-    }
-    100% {
-        transform: rotate(360deg);
-    }
-}
-
-@keyframes ga-spin-modern {
-    0% {
-        transform: rotate(0deg) scale(1);
-    }
-    50% {
-        transform: rotate(180deg) scale(1.1);
-    }
-    100% {
-        transform: rotate(360deg) scale(1);
-    }
-}
-
-@keyframes ga-toast-slide-in-right {
-    from {
-        transform: translateX(100%) scale(0.9);
-        opacity: 0;
-    }
-    to {
-        transform: translateX(0) scale(1);
-        opacity: 1;
-    }
-}
-
-@keyframes ga-toast-slide-in-left {
-    from {
-        transform: translateX(-100%) scale(0.9);
-        opacity: 0;
-    }
-    to {
-        transform: translateX(0) scale(1);
-        opacity: 1;
-    }
-}
-
-@keyframes ga-toast-slide-in-top {
-    from {
-        transform: translateY(-100%) scale(0.9);
-        opacity: 0;
-    }
-    to {
-        transform: translateY(0) scale(1);
-        opacity: 1;
-    }
-}
-
-@keyframes ga-toast-slide-in-bottom {
-    from {
-        transform: translateY(100%) scale(0.9);
-        opacity: 0;
-    }
-    to {
-        transform: translateY(0) scale(1);
-        opacity: 1;
-    }
-}
-
-@keyframes ga-toast-bounce-in {
-    0% {
-        transform: scale(0.3) translateY(20px);
-        opacity: 0;
-    }
-    50% {
-        transform: scale(1.05) translateY(-5px);
-        opacity: 0.8;
-    }
-    70% {
-        transform: scale(0.95) translateY(2px);
-        opacity: 0.9;
-    }
-    100% {
-        transform: scale(1) translateY(0);
-        opacity: 1;
-    }
-}
-
-@keyframes ga-toast-fade-in {
-    from {
-        opacity: 0;
-        transform: translateY(10px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-@keyframes ga-toast-pulse {
-    0%, 100% {
-        transform: scale(1);
-        opacity: 1;
-    }
-    50% {
-        transform: scale(1.02);
-        opacity: 0.9;
-    }
-}
-
-@keyframes ga-toast-glow {
-    0%, 100% {
-        box-shadow: 
-            var(--ga-shadow-toast),
-            0 0 20px rgba(0, 115, 170, 0.2);
-    }
-    50% {
-        box-shadow: 
-            var(--ga-shadow-lg),
-            0 0 30px rgba(0, 115, 170, 0.4);
-    }
-}
-
-/* Interactive Toast Variants */
-.ga-toast-interactive {
-    cursor: pointer;
-    transition: all var(--ga-duration-200) var(--ga-ease-out);
-}
-
-.ga-toast-interactive:hover {
-    transform: translateY(-2px) scale(1.02);
-    box-shadow: 
-        var(--ga-shadow-xl),
-        0 0 0 1px rgba(255, 255, 255, 0.15) inset;
-}
-
-.ga-toast-interactive:active {
-    transform: translateY(0) scale(0.98);
-}
-
-/* Notification Badge */
-.ga-toast-badge {
-    position: absolute;
-    top: -8px;
-    right: -8px;
-    width: 24px;
-    height: 24px;
-    background: linear-gradient(135deg, var(--ga-error), var(--ga-error-hover));
-    color: white;
-    border-radius: var(--ga-radius-full);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: var(--ga-text-xs);
-    font-weight: var(--ga-font-bold);
-    border: 2px solid var(--ga-bg-primary);
-    box-shadow: var(--ga-shadow-md);
-    animation: ga-toast-pulse 2s infinite;
-}
-
-/* Toast with Custom Patterns */
-.ga-toast-pattern::before {
-    background-image: 
-        radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.1) 0%, transparent 50%),
-        radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.1) 0%, transparent 50%),
-        radial-gradient(circle at 40% 40%, rgba(120, 200, 255, 0.1) 0%, transparent 50%);
-}
-
-/* Toast Group Animations */
-.ga-toast-group {
-    display: flex;
-    flex-direction: column;
-    gap: var(--ga-space-2);
-}
-
-.ga-toast-group .ga-toast {
-    animation: ga-toast-fade-in var(--ga-duration-300) var(--ga-ease-out) forwards;
-}
-
-.ga-toast-group .ga-toast:nth-child(1) { animation-delay: 0ms; }
-.ga-toast-group .ga-toast:nth-child(2) { animation-delay: 100ms; }
-.ga-toast-group .ga-toast:nth-child(3) { animation-delay: 200ms; }
-.ga-toast-group .ga-toast:nth-child(4) { animation-delay: 300ms; }
-.ga-toast-group .ga-toast:nth-child(5) { animation-delay: 400ms; }
-
-/* Responsive Toasts - Enhanced */
-@media (max-width: 767px) {
-    .ga-toast {
-        width: calc(100vw - var(--ga-space-6));
-        max-width: none;
-        margin-left: auto;
-        margin-right: auto;
-        border-radius: var(--ga-radius-lg);
-    }
-    
-    .ga-toast-container-top-start,
-    .ga-toast-container-top-center,
-    .ga-toast-container-top-end {
-        top: var(--ga-space-4);
-        left: var(--ga-space-3);
-        right: var(--ga-space-3);
-        transform: none;
-    }
-    
-    .ga-toast-container-bottom-start,
-    .ga-toast-container-bottom-center,
-    .ga-toast-container-bottom-end {
-        bottom: var(--ga-space-4);
-        left: var(--ga-space-3);
-        right: var(--ga-space-3);
-        transform: none;
-    }
-    
-    .ga-toast-container-middle-start,
-    .ga-toast-container-middle-center,
-    .ga-toast-container-middle-end {
-        top: 50%;
-        left: var(--ga-space-3);
-        right: var(--ga-space-3);
-        transform: translateY(-50%);
-    }
-    
-    .ga-toast-actions {
-        flex-direction: column;
-    }
-    
-    .ga-toast-actions .ga-btn {
-        width: 100%;
-    }
-    
-    .ga-toast-xs,
-    .ga-toast-sm,
-    .ga-toast-lg,
-    .ga-toast-xl {
-        width: calc(100vw - var(--ga-space-6));
-    }
-    
-    .ga-toast-icon {
-        width: var(--ga-icon-md);
-        height: var(--ga-icon-md);
-    }
-    
-    .ga-toast-title {
-        font-size: var(--ga-text-sm);
-    }
-    
-    .ga-toast-body {
-        font-size: var(--ga-text-sm);
-    }
-}
-
-@media (max-width: 479px) {
-    .ga-toast {
-        width: calc(100vw - var(--ga-space-4));
-        padding: var(--ga-space-4);
-        border-radius: var(--ga-radius-md);
-    }
-    
-    .ga-toast-container-top-start,
-    .ga-toast-container-top-center,
-    .ga-toast-container-top-end,
-    .ga-toast-container-bottom-start,
-    .ga-toast-container-bottom-center,
-    .ga-toast-container-bottom-end,
-    .ga-toast-container-middle-start,
-    .ga-toast-container-middle-center,
-    .ga-toast-container-middle-end {
-        left: var(--ga-space-2);
-        right: var(--ga-space-2);
-    }
-    
-    .ga-toast-title {
-        font-size: var(--ga-text-xs);
-    }
-    
-    .ga-toast-body {
-        font-size: var(--ga-text-xs);
-    }
-    
-    .ga-toast-close {
-        width: 28px;
-        height: 28px;
-        top: var(--ga-space-2);
-        right: var(--ga-space-2);
-    }
-    
-    .ga-toast-icon {
-        width: var(--ga-icon-sm);
-        height: var(--ga-icon-sm);
-        margin-right: var(--ga-space-2);
-    }
-}
-
-/* WordPress Admin Compatibility - Enhanced */
-.wp-admin .ga-toast {
-    border-radius: var(--ga-radius-lg);
-    font-family: var(--ga-font-sans);
-    box-shadow: 
-        0 5px 15px rgba(0, 0, 0, 0.1),
-        0 0 0 1px rgba(255, 255, 255, 0.05) inset;
-}
-
-.wp-admin .ga-toast .ga-toast-title {
-    font-size: var(--ga-text-sm);
-    font-weight: var(--ga-font-semibold);
-}
-
-.wp-admin .ga-toast .ga-toast-body {
-    font-size: var(--ga-text-sm);
-}
-
-.wp-admin .ga-toast .ga-toast-close {
-    font-size: var(--ga-text-base);
-    background: rgba(255, 255, 255, 0.1);
-    backdrop-filter: blur(10px);
-}
-
-.wp-admin .ga-toast .ga-toast-close:hover {
-    background: rgba(255, 255, 255, 0.2);
-}
-
-/* Accessibility improvements - Enhanced */
-@media (prefers-reduced-motion: reduce) {
-    .ga-toast {
-        transition: opacity var(--ga-duration-150) ease;
-        animation: none;
-    }
-    
-    .ga-toast::before {
-        animation: none;
-    }
-    
-    .ga-toast.show {
-        opacity: 1;
-        transform: none;
-    }
-    
-    .ga-toast.hide {
-        opacity: 0;
-        transform: none;
-    }
-    
-    .ga-toast-loading::after {
-        animation: none;
-        border: 3px solid var(--ga-gray-300);
-        border-top: 3px solid var(--ga-primary);
-    }
-    
-    .ga-toast-progress {
-        transition: width 0.1s linear;
-    }
-    
-    .ga-toast-interactive:hover {
-        transform: none;
-    }
-    
-    .ga-toast-badge {
-        animation: none;
-    }
-    
-    .ga-toast-group .ga-toast {
-        animation: none;
-        animation-delay: 0ms;
-    }
-}
-
-/* High contrast mode - Enhanced */
-@media (prefers-contrast: high) {
-    .ga-toast {
-        border-width: 2px;
-        background: var(--ga-bg-primary);
-        box-shadow: none;
-    }
-    
-    .ga-toast::before {
-        display: none;
-    }
-    
-    .ga-toast-close {
-        border: 2px solid transparent;
-        background: var(--ga-bg-secondary);
-    }
-    
-    .ga-toast-close:focus {
-        border-color: currentColor;
-        outline: 2px solid currentColor;
-        outline-offset: 2px;
-    }
-    
-    .ga-toast-icon {
-        background: var(--ga-bg-secondary);
-        border: 1px solid var(--ga-border-dark);
-    }
-    
-    .ga-toast-progress {
-        box-shadow: none;
-    }
-}
-
-/* Focus management for screen readers */
-.ga-toast[role="alert"] {
-    outline: none;
-}
-
-.ga-toast[tabindex] {
-    outline: 2px solid transparent;
-}
-
-.ga-toast[tabindex]:focus {
-    outline-color: var(--ga-border-focus);
-    outline-offset: 2px;
-}
-
-/* Print styles */
-@media print {
-    .ga-toast-container {
-        display: none;
-    }
-}
-
-/* Toast with Media Queries for System Themes */
-@media (prefers-color-scheme: dark) {
-    [data-ga-theme="system"] .ga-toast,
-    [data-hp-theme-mode="system"] .ga-toast {
-        background: linear-gradient(135deg, 
-            var(--ga-bg-primary), 
-            var(--ga-bg-secondary)
-        );
-        box-shadow: 
-            var(--ga-shadow-toast),
-            0 0 0 1px rgba(255, 255, 255, 0.1) inset;
-    }
-}
-
-/* Custom Toast Utilities */
-.ga-toast-shake {
-    animation: ga-toast-shake 0.5s ease-in-out;
-}
-
-@keyframes ga-toast-shake {
-    0%, 100% { transform: translateX(0); }
-    10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
-    20%, 40%, 60%, 80% { transform: translateX(2px); }
-}
-
-.ga-toast-heartbeat {
-    animation: ga-toast-heartbeat 1.5s ease-in-out infinite;
-}
-
-@keyframes ga-toast-heartbeat {
-    0% { transform: scale(1); }
-    14% { transform: scale(1.05); }
-    28% { transform: scale(1); }
-    42% { transform: scale(1.05); }
-    70% { transform: scale(1); }
-}
-
-.ga-toast-flash {
-    animation: ga-toast-flash 1s ease-in-out;
-}
-
-@keyframes ga-toast-flash {
-    0%, 50%, 100% { opacity: 1; }
-    25%, 75% { opacity: 0.5; }
-}
-
-/* Toast Themes */
-.ga-toast-glassmorphism {
-    background: rgba(255, 255, 255, 0.1);
-    backdrop-filter: blur(20px);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-}
-
-.ga-toast-neumorphism {
-    background: var(--ga-bg-secondary);
-    border: none;
-}
-
-.ga-toast-gradient-border {
-    position: relative;
-    background: var(--ga-bg-primary);
-    border: none;
-}
-
-.ga-toast-gradient-border::before {
-    content: '';
-    position: absolute;
-    inset: -2px;
-    background: linear-gradient(45deg, 
-        var(--ga-primary), 
-        var(--ga-success), 
-        var(--ga-info), 
-        var(--ga-warning)
-    );
-    border-radius: inherit;
-    z-index: -1;
-    animation: ga-gradient-rotate 3s linear infinite;
-}
-
-@keyframes ga-gradient-rotate {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-}
-
-@keyframes ga-progress-shimmer {
-    0% {
-        transform: translateX(-100%);
-    }
-    100% {
-        transform: translateX(100%);
-    }
-}