/**
 * Flare Toast Notifications - Multi-Theme CSS v2.1
 * Three distinct themes: Classic, Modern, Vibrant
 * Each with light and dark mode support
 */

/* ===================================
   Universal box-sizing
   =================================== */
[data-flare-container],
[data-flare-container] *,
[data-flare-toast],
[data-flare-toast] * {
    box-sizing: border-box;
}

/* ===================================
   Base Variables (All Themes)
   =================================== */
:root {
    /* Spacing and sizing */
    --flare-spacing: 1.5rem;
    --flare-toast-width: 24rem;
    --flare-toast-max-width: calc(100vw - 2rem);
    --flare-border-radius: 0.75rem;
    --flare-icon-size: 1.25rem;

    /* Animation durations */
    --flare-transition-fast: 150ms;
    --flare-transition-normal: 200ms;
    --flare-transition-slow: 300ms;

    /* Z-index - Tailwind standard */
    --flare-z-index: 50;
}

/* ===================================
   THEME: CLASSIC
   =================================== */
[data-flare-container][data-theme="classic"] {
    /* Light mode */
    --flare-bg: #ffffff;
    --flare-text: #111827;
    --flare-text-secondary: #6b7280;
    --flare-border: #e5e7eb;
    --flare-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);

    /* Variants - Light */
    --flare-success: #10b981;
    --flare-success-bg: #ffffff;
    --flare-success-border: #22c55e;

    --flare-warning: #f59e0b;
    --flare-warning-bg: #ffffff;
    --flare-warning-border: #f59e0b;

    --flare-danger: #ef4444;
    --flare-danger-bg: #ffffff;
    --flare-danger-border: #ef4444;

    --flare-info: #3b82f6;
    --flare-info-bg: #ffffff;
    --flare-info-border: #3b82f6;
}

@media (prefers-color-scheme: dark) {
    [data-flare-container][data-theme="classic"] {
        --flare-bg: #1f2937;
        --flare-text: #f9fafb;
        --flare-text-secondary: #9ca3af;
        --flare-border: #374151;
        --flare-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);

        --flare-success-bg: #1f2937;
        --flare-success-border: #22c55e;

        --flare-warning-bg: #1f2937;
        --flare-warning-border: #f59e0b;

        --flare-danger-bg: #1f2937;
        --flare-danger-border: #ef4444;

        --flare-info-bg: #1f2937;
        --flare-info-border: #3b82f6;
    }
}

.dark [data-flare-container][data-theme="classic"] {
    --flare-bg: #1f2937;
    --flare-text: #f9fafb;
    --flare-text-secondary: #9ca3af;
    --flare-border: #374151;
    --flare-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);

    --flare-success-bg: #1f2937;
    --flare-success-border: #22c55e;

    --flare-warning-bg: #1f2937;
    --flare-warning-border: #f59e0b;

    --flare-danger-bg: #1f2937;
    --flare-danger-border: #ef4444;

    --flare-info-bg: #1f2937;
    --flare-info-border: #3b82f6;
}

/* ===================================
   THEME: MODERN
   =================================== */
[data-flare-container][data-theme="modern"] {
    /* Light mode */
    --flare-bg: rgba(255, 255, 255, 0.8);
    --flare-text: #0f172a;
    --flare-text-secondary: #64748b;
    --flare-border: rgba(226, 232, 240, 0.5);
    --flare-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --flare-blur: 8px;

    /* Variants - Light */
    --flare-success: #2563eb;
    --flare-success-bg: rgba(255, 255, 255, 0.8);
    --flare-success-border: rgba(226, 232, 240, 0.5);

    --flare-warning: #2563eb;
    --flare-warning-bg: rgba(255, 255, 255, 0.8);
    --flare-warning-border: rgba(226, 232, 240, 0.5);

    --flare-danger: #2563eb;
    --flare-danger-bg: rgba(255, 255, 255, 0.8);
    --flare-danger-border: rgba(226, 232, 240, 0.5);

    --flare-info: #2563eb;
    --flare-info-bg: rgba(255, 255, 255, 0.8);
    --flare-info-border: rgba(226, 232, 240, 0.5);
}

@media (prefers-color-scheme: dark) {
    [data-flare-container][data-theme="modern"] {
        --flare-bg: rgba(31, 41, 55, 0.8);
        --flare-text: #f1f5f9;
        --flare-text-secondary: #94a3b8;
        --flare-border: rgba(55, 65, 81, 0.5);
        --flare-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3),
            0 4px 6px -4px rgba(0, 0, 0, 0.2);

        --flare-success-bg: rgba(31, 41, 55, 0.8);
        --flare-success-border: rgba(55, 65, 81, 0.5);

        --flare-warning-bg: rgba(31, 41, 55, 0.8);
        --flare-warning-border: rgba(55, 65, 81, 0.5);

        --flare-danger-bg: rgba(31, 41, 55, 0.8);
        --flare-danger-border: rgba(55, 65, 81, 0.5);

        --flare-info-bg: rgba(31, 41, 55, 0.8);
        --flare-info-border: rgba(55, 65, 81, 0.5);
    }
}

.dark [data-flare-container][data-theme="modern"] {
    --flare-bg: rgba(31, 41, 55, 0.8);
    --flare-text: #f1f5f9;
    --flare-text-secondary: #94a3b8;
    --flare-border: rgba(55, 65, 81, 0.5);
    --flare-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3),
        0 4px 6px -4px rgba(0, 0, 0, 0.2);

    --flare-success-bg: rgba(31, 41, 55, 0.8);
    --flare-success-border: rgba(55, 65, 81, 0.5);

    --flare-warning-bg: rgba(31, 41, 55, 0.8);
    --flare-warning-border: rgba(55, 65, 81, 0.5);

    --flare-danger-bg: rgba(31, 41, 55, 0.8);
    --flare-danger-border: rgba(55, 65, 81, 0.5);

    --flare-info-bg: rgba(31, 41, 55, 0.8);
    --flare-info-border: rgba(55, 65, 81, 0.5);
}

/* ===================================
   THEME: VIBRANT
   =================================== */
[data-flare-container][data-theme="vibrant"] {
    /* Light mode */
    --flare-bg: #ffffff;
    --flare-text: #ffffff;
    --flare-text-secondary: rgba(255, 255, 255, 0.9);
    --flare-border: transparent;
    --flare-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --flare-blur: 0px;

    /* Variants - Light */
    --flare-success: #ffffff;
    --flare-success-bg: linear-gradient(to right, #10b981, #059669);
    --flare-success-border: transparent;
    --flare-success-shadow: 0 10px 15px -3px rgba(16, 185, 129, 0.3);

    --flare-warning: #ffffff;
    --flare-warning-bg: linear-gradient(to right, #f97316, #ea580c);
    --flare-warning-border: transparent;
    --flare-warning-shadow: 0 10px 15px -3px rgba(249, 115, 22, 0.3);

    --flare-danger: #ffffff;
    --flare-danger-bg: linear-gradient(to right, #ef4444, #dc2626);
    --flare-danger-border: transparent;
    --flare-danger-shadow: 0 10px 15px -3px rgba(239, 68, 68, 0.3);

    --flare-info: #ffffff;
    --flare-info-bg: linear-gradient(to right, #3b82f6, #2563eb);
    --flare-info-border: transparent;
    --flare-info-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.3);
}

@media (prefers-color-scheme: dark) {
    [data-flare-container][data-theme="vibrant"] {
        --flare-bg: #18181b;
        --flare-text: #ffffff;
        --flare-text-secondary: rgba(255, 255, 255, 0.9);
        --flare-border: transparent;
        --flare-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5),
            0 4px 6px -4px rgba(0, 0, 0, 0.3);

        --flare-success-bg: linear-gradient(to right, #10b981, #059669);
        --flare-success-border: transparent;
        --flare-success-shadow: 0 10px 15px -3px rgba(16, 185, 129, 0.3);

        --flare-warning-bg: linear-gradient(to right, #f97316, #ea580c);
        --flare-warning-border: transparent;
        --flare-warning-shadow: 0 10px 15px -3px rgba(249, 115, 22, 0.3);

        --flare-danger-bg: linear-gradient(to right, #ef4444, #dc2626);
        --flare-danger-border: transparent;
        --flare-danger-shadow: 0 10px 15px -3px rgba(239, 68, 68, 0.3);

        --flare-info-bg: linear-gradient(to right, #3b82f6, #2563eb);
        --flare-info-border: transparent;
        --flare-info-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.3);
    }
}

.dark [data-flare-container][data-theme="vibrant"] {
    --flare-bg: #18181b;
    --flare-text: #ffffff;
    --flare-text-secondary: rgba(255, 255, 255, 0.9);
    --flare-border: transparent;
    --flare-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5),
        0 4px 6px -4px rgba(0, 0, 0, 0.3);

    --flare-success-bg: linear-gradient(to right, #10b981, #059669);
    --flare-success-border: transparent;
    --flare-success-shadow: 0 10px 15px -3px rgba(16, 185, 129, 0.3);

    --flare-warning-bg: linear-gradient(to right, #f97316, #ea580c);
    --flare-warning-border: transparent;
    --flare-warning-shadow: 0 10px 15px -3px rgba(249, 115, 22, 0.3);

    --flare-danger-bg: linear-gradient(to right, #ef4444, #dc2626);
    --flare-danger-border: transparent;
    --flare-danger-shadow: 0 10px 15px -3px rgba(239, 68, 68, 0.3);

    --flare-info-bg: linear-gradient(to right, #3b82f6, #2563eb);
    --flare-info-border: transparent;
    --flare-info-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.3);
}

/* ===================================
   Container Styles
   =================================== */
[data-flare-container] {
    position: fixed;
    z-index: var(--flare-z-index);
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: var(--flare-spacing);
    max-height: calc(100vh - 3rem);
    overflow: visible;
    width: var(--flare-toast-width);
    max-width: var(--flare-toast-max-width);
}

/* Position variants - Standard positioning with RTL support */
[data-flare-container][data-position="top-start"] {
    top: 0;
    left: 0;
}

[data-flare-container][data-position="top-center"] {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

[data-flare-container][data-position="top-end"] {
    top: 0;
    right: 0;
}

[data-flare-container][data-position="bottom-start"] {
    bottom: 0;
    left: 0;
}

[data-flare-container][data-position="bottom-center"] {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

[data-flare-container][data-position="bottom-end"] {
    bottom: 0;
    right: 0;
}

/* RTL support - flip start/end positions */
[dir="rtl"] [data-flare-container][data-position="top-start"],
[dir="rtl"] [data-flare-container][data-position="bottom-start"] {
    left: auto;
    right: 0;
}

[dir="rtl"] [data-flare-container][data-position="top-end"],
[dir="rtl"] [data-flare-container][data-position="bottom-end"] {
    right: auto;
    left: 0;
}

[dir="rtl"] [data-flare-container][data-position*="center"] {
    transform: translateX(50%);
}

/* ===================================
   Toast Card Styles
   =================================== */
[data-flare-toast] {
    pointer-events: auto;
    width: 100%;
    max-width: 100%;
    background: var(--flare-bg);
    border: 1px solid var(--flare-border);
    border-radius: var(--flare-border-radius);
    box-shadow: var(--flare-shadow);
    overflow: hidden;
    transition: all var(--flare-transition-normal) cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-font-smoothing: subpixel-antialiased;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

/* Modern theme blur */
[data-flare-container][data-theme="modern"] [data-flare-toast] {
    backdrop-filter: blur(var(--flare-blur));
    -webkit-backdrop-filter: blur(var(--flare-blur));
}

/* Vibrant theme blur */
[data-flare-container][data-theme="vibrant"] [data-flare-toast] {
    backdrop-filter: blur(var(--flare-blur));
    -webkit-backdrop-filter: blur(var(--flare-blur));
}

/* Classic theme border */
[data-flare-container][data-theme="classic"] [data-flare-toast] {
  border-width: 0 0 0 4px;
}

/* Hover effects */
[data-flare-container][data-expanded="true"] [data-flare-toast]:hover {
    transform: translateY(-2px) translateZ(0);
}

/* Classic theme hover */
[data-flare-container][data-theme="classic"][data-expanded="true"]
    [data-flare-toast]:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.15);
}

/* Modern theme hover */
[data-flare-container][data-theme="modern"][data-expanded="true"]
    [data-flare-toast]:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

/* Vibrant theme hover */
[data-flare-container][data-theme="vibrant"][data-expanded="true"]
    [data-flare-toast]:hover {
    transform: translateY(-4px) scale(1.02) translateZ(0);
}

/* Focus styles */
[data-flare-toast]:focus {
    outline: 2px solid var(--flare-info);
    outline-offset: 2px;
}

/* Toast variants - Classic theme (solid backgrounds) */
[data-flare-container][data-theme="classic"]
    [data-flare-toast][data-variant="success"] {
    background: var(--flare-success-bg);
    border-color: var(--flare-success-border);
    border-left-color: var(--flare-success-border);
}

[data-flare-container][data-theme="classic"]
    [data-flare-toast][data-variant="warning"] {
    background: var(--flare-warning-bg);
    border-color: var(--flare-warning-border);
    border-left-color: var(--flare-warning-border);
}

[data-flare-container][data-theme="classic"]
    [data-flare-toast][data-variant="danger"] {
    background: var(--flare-danger-bg);
    border-color: var(--flare-danger-border);
    border-left-color: var(--flare-danger-border);
}

[data-flare-container][data-theme="classic"]
    [data-flare-toast][data-variant="info"] {
    background: var(--flare-info-bg);
    border-color: var(--flare-info-border);
    border-left-color: var(--flare-info-border);
}

/* Toast variants - Modern theme (gradient backgrounds) */
[data-flare-container][data-theme="modern"]
    [data-flare-toast][data-variant="success"] {
    background: var(--flare-success-bg);
    border-color: var(--flare-success-border);
    box-shadow: var(--flare-shadow), 0 0 0 1px var(--flare-success-border);
}

[data-flare-container][data-theme="modern"]
    [data-flare-toast][data-variant="warning"] {
    background: var(--flare-warning-bg);
    border-color: var(--flare-warning-border);
    box-shadow: var(--flare-shadow), 0 0 0 1px var(--flare-warning-border);
}

[data-flare-container][data-theme="modern"]
    [data-flare-toast][data-variant="danger"] {
    background: var(--flare-danger-bg);
    border-color: var(--flare-danger-border);
    box-shadow: var(--flare-shadow), 0 0 0 1px var(--flare-danger-border);
}

[data-flare-container][data-theme="modern"]
    [data-flare-toast][data-variant="info"] {
    background: var(--flare-info-bg);
    border-color: var(--flare-info-border);
    box-shadow: var(--flare-shadow), 0 0 0 1px var(--flare-info-border);
}

/* Toast variants - Vibrant theme (bold gradients + glow) */
[data-flare-container][data-theme="vibrant"]
    [data-flare-toast][data-variant="success"] {
    background: var(--flare-success-bg);
    border-color: var(--flare-success-border);
    box-shadow: var(--flare-shadow), var(--flare-success-shadow);
}

[data-flare-container][data-theme="vibrant"]
    [data-flare-toast][data-variant="warning"] {
    background: var(--flare-warning-bg);
    border-color: var(--flare-warning-border);
    box-shadow: var(--flare-shadow), var(--flare-warning-shadow);
}

[data-flare-container][data-theme="vibrant"]
    [data-flare-toast][data-variant="danger"] {
    background: var(--flare-danger-bg);
    border-color: var(--flare-danger-border);
    box-shadow: var(--flare-shadow), var(--flare-danger-shadow);
}

[data-flare-container][data-theme="vibrant"]
    [data-flare-toast][data-variant="info"] {
    background: var(--flare-info-bg);
    border-color: var(--flare-info-border);
    box-shadow: var(--flare-shadow), var(--flare-info-shadow);
}

/* ===================================
   Toast Content
   =================================== */
[data-flare-content] {
  padding: 1rem 1.125rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Icon wrapper */
[data-flare-icon] {
  flex-shrink: 0;
  width: var(--flare-icon-size);
  height: var(--flare-icon-size);
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-flare-icon] svg {
    width: 100%;
    height: 100%;
}

/* Modern Theme Icon Styles */
[data-flare-container][data-theme="modern"] [data-flare-icon] {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  padding: 0.5rem;
}

[data-flare-container][data-theme="modern"] [data-flare-icon][data-variant="success"] {
  background-color: #d1fae5;
  color: #059669;
}
.dark [data-flare-container][data-theme="modern"] [data-flare-icon][data-variant="success"] {
  background-color: rgba(6, 95, 70, 0.3);
  color: #34d399;
}

[data-flare-container][data-theme="modern"] [data-flare-icon][data-variant="warning"] {
  background-color: #fef3c7;
  color: #d97706;
}
.dark [data-flare-container][data-theme="modern"] [data-flare-icon][data-variant="warning"] {
  background-color: rgba(146, 64, 14, 0.3);
  color: #fbbf24;
}

[data-flare-container][data-theme="modern"] [data-flare-icon][data-variant="danger"] {
  background-color: #fee2e2;
  color: #dc2626;
}
.dark [data-flare-container][data-theme="modern"] [data-flare-icon][data-variant="danger"] {
  background-color: rgba(153, 27, 27, 0.3);
  color: #f87171;
}

[data-flare-container][data-theme="modern"] [data-flare-icon][data-variant="info"] {
  background-color: #dbeafe;
  color: #2563eb;
}
.dark [data-flare-container][data-theme="modern"] [data-flare-icon][data-variant="info"] {
  background-color: rgba(30, 64, 175, 0.3);
  color: #60a5fa;
}

/* Icon colors for other themes */
[data-flare-container]:not([data-theme="modern"]) [data-flare-icon][data-variant="success"] {
  color: var(--flare-success);
}

[data-flare-container]:not([data-theme="modern"]) [data-flare-icon][data-variant="warning"] {
  color: var(--flare-warning);
}

[data-flare-container]:not([data-theme="modern"]) [data-flare-icon][data-variant="danger"] {
  color: var(--flare-danger);
}

[data-flare-container]:not([data-theme="modern"]) [data-flare-icon][data-variant="info"] {
  color: var(--flare-info);
}

/* Vibrant theme icons (always white) */
[data-flare-container][data-theme="vibrant"] [data-flare-icon] {
  color: #ffffff !important;
  background-color: transparent !important;
  width: var(--flare-icon-size);
  height: var(--flare-icon-size);
  padding: 0;
}

/* Text content */
[data-flare-text] {
    flex: 1;
    min-width: 0;
}

[data-flare-heading] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--flare-text);
    margin-bottom: 0.125rem;
    line-height: 1.25;
}

[data-flare-message] {
    font-size: 0.875rem;
    color: var(--flare-text-secondary);
    line-height: 1.5;
    word-wrap: break-word;
}

[data-flare-message]:only-child {
    color: var(--flare-text);
    font-weight: 500;
}

/* ===================================
   Close Button
   =================================== */
[data-flare-close] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0.375rem;
    border: none;
    background: transparent;
    color: var(--flare-text-secondary);
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all var(--flare-transition-fast) ease;
    outline: none;
}

[data-flare-close]:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--flare-text);
}

.dark [data-flare-close]:hover {
    background: rgba(255, 255, 255, 0.1);
}

[data-flare-close]:focus {
    outline: 2px solid var(--flare-info);
    outline-offset: 2px;
}

[data-flare-close]:active {
    transform: scale(0.95);
}

[data-flare-close] svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* ===================================
   Animations
   =================================== */
@keyframes flare-slide-in-top {
    from {
        opacity: 0;
        transform: translateY(-100%) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes flare-slide-in-bottom {
    from {
        opacity: 0;
        transform: translateY(100%) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes flare-fade-out {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.9);
    }
}

[data-flare-container][data-position^="top"]
    [data-flare-toast][data-state="entering"] {
    animation: flare-slide-in-top var(--flare-transition-slow)
        cubic-bezier(0.16, 1, 0.3, 1);
}

[data-flare-container][data-position^="bottom"]
    [data-flare-toast][data-state="entering"] {
    animation: flare-slide-in-bottom var(--flare-transition-slow)
        cubic-bezier(0.16, 1, 0.3, 1);
}

[data-flare-toast][data-state="leaving"] {
    animation: flare-fade-out var(--flare-transition-normal) ease-in;
}

/* ===================================
   Stacking Mode
   =================================== */
[data-flare-container][data-stacking="true"][data-expanded="false"] {
    display: block !important;
    min-height: 140px;
    max-height: 160px;
    overflow: visible;
}

[data-flare-container][data-stacking="true"][data-expanded="false"]
    [data-flare-toast]:not(:nth-last-child(-n + 3)) {
    display: none !important;
}

[data-flare-container][data-stacking="true"][data-expanded="false"]
    [data-flare-toast] {
    position: absolute !important;
    bottom: 0;
    left: var(--flare-spacing);
    right: var(--flare-spacing);
    width: calc(100% - (var(--flare-spacing) * 2));
    margin: 0;
    transform-origin: bottom center;
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1), filter 0.1s ease-out;
    will-change: transform, opacity;
}

[data-flare-container][data-position^="top"][data-stacking="true"][data-expanded="false"]
    [data-flare-toast] {
    bottom: auto;
    top: 0;
    transform-origin: top center;
}

[data-flare-container][data-stacking="true"][data-expanded="false"]
    [data-flare-toast]:nth-last-child(3) {
    transform: translateY(0) scale(0.92) translateZ(0) !important;
    opacity: 0.6 !important;
    filter: blur(1px) !important;
    z-index: 1 !important;
}

[data-flare-container][data-stacking="true"][data-expanded="false"]
    [data-flare-toast]:nth-last-child(2) {
    transform: translateY(-10px) scale(0.96) translateZ(0) !important;
    opacity: 0.8 !important;
    filter: blur(0.5px) !important;
    z-index: 2 !important;
}

[data-flare-container][data-stacking="true"][data-expanded="false"]
    [data-flare-toast]:last-child {
    transform: translateY(-20px) scale(1) translateZ(0) !important;
    opacity: 1 !important;
    filter: none !important;
    z-index: 3 !important;
}

[data-flare-container][data-position^="top"][data-stacking="true"][data-expanded="false"]
    [data-flare-toast]:nth-last-child(2) {
    transform: translateY(10px) scale(0.96) translateZ(0) !important;
}

[data-flare-container][data-position^="top"][data-stacking="true"][data-expanded="false"]
    [data-flare-toast]:last-child {
    transform: translateY(20px) scale(1) translateZ(0) !important;
}

/* ===================================
   Expanded Mode
   =================================== */
[data-flare-container][data-expanded="true"] {
    display: flex !important;
    flex-direction: column !important;
    min-height: auto;
    max-height: calc(100vh - 3rem);
    gap: 0.75rem !important;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
    transition: gap 0.2s ease-out;
}

[data-flare-container][data-expanded="true"]::-webkit-scrollbar {
    width: 6px;
}

[data-flare-container][data-expanded="true"]::-webkit-scrollbar-track {
    background: transparent;
}

[data-flare-container][data-expanded="true"]::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.dark [data-flare-container][data-expanded="true"]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
}

[data-flare-container][data-expanded="true"] [data-flare-toast] {
    position: relative !important;
    opacity: 1 !important;
    transform: translateY(0) scale(1) translateZ(0) !important;
    filter: none !important;
    z-index: auto !important;
    margin-bottom: 0 !important;
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* No stacking mode */
[data-flare-container][data-stacking="false"] {
    display: flex !important;
    flex-direction: column !important;
    min-height: auto;
    max-height: calc(100vh - 3rem);
    gap: 0.75rem;
    overflow-y: auto;
    overflow-x: hidden;
}

[data-flare-container][data-stacking="false"] [data-flare-toast] {
    position: relative !important;
    opacity: 1 !important;
    transform: translateY(0) scale(1) translateZ(0) !important;
    filter: none !important;
}

/* ===================================
   Responsive Design
   =================================== */
@media (max-width: 640px) {
    :root {
        --flare-spacing: 0.75rem;
        --flare-toast-width: calc(100vw - 1.5rem);
    }

    [data-flare-container] {
        left: 0.75rem !important;
        right: 0.75rem !important;
        bottom: 0.75rem !important;
        top: auto !important;
        transform: none !important;
        padding: 0;
        width: calc(100vw - 1.5rem);
    }

    [data-flare-container][data-position*="top"] {
        top: 0.75rem !important;
        bottom: auto !important;
    }

    [data-flare-content] {
        padding: 0.875rem 1rem;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    [data-flare-toast],
    [data-flare-close] {
        transition: none;
    }

    [data-flare-toast][data-state="entering"],
    [data-flare-toast][data-state="leaving"] {
        animation: none;
    }
}

@media (prefers-contrast: high) {
    [data-flare-toast] {
        border-width: 2px;
    }
}

/* Print */
@media print {
    [data-flare-container] {
        display: none !important;
    }
}