ga-toasts 1.0.0

package/src/toasts.css

@@ -0,0 +1,1644 @@
+/**
+ * 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%);
+    }
+}