/* Reset and Base Styles */
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }

            #quantimis-chatbox,
            #quantimis-chat-button,
            #chat-header,
            #chat-input input,
            #chat-input button,
            .bot,
            .user {
                font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
                font-feature-settings: 'liga' 1, 'calt' 1;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
                text-rendering: optimizeLegibility;
            }

            /* Theme Variables */
            :root {
                --shadow-light: rgba(0, 0, 0, 0.12);
                --shadow-dark: rgba(0, 0, 0, 0.25);
                --transition-ease: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                --border-radius: 16px;
                --font-size-base: 14px;
                --spacing-unit: 10px;
                --light-blue-glow: rgba(76, 147, 255, 0.3); /* For message glow */
            }

            /* Light Theme */
            html[data-theme="light"] {
                --glass-bg: rgba(245, 245, 245, 0.55);
                --glass-border: rgba(0, 0, 0, 0.18);
                --glass-blur: blur(16px) saturate(160%);
                --accent-color: rgba(37, 99, 235, 0.65);
                --accent-border: rgba(37, 99, 235, 0.75);
                --text-primary: #1a2535;
                --text-secondary: rgba(60, 75, 100, 0.85);
                --glow-halo: rgba(0, 0, 0, 0.3);
                --button-glow: rgba(37, 99, 235, 0.3); /* Lighter blue glow for light mode */
                --button-gradient-start: #a0c4ff; /* Light blue for light mode */
                --button-gradient-end: #4c8dff; /* Slightly darker blue for light mode */
                --button-gradient-disabled-start: rgba(160, 196, 255, 0.5);
                --button-gradient-disabled-end: rgba(76, 141, 255, 0.5);
                --button-after-highlight: rgba(0, 0, 0, 0.2); /* Dark highlight for light mode */
            }

            /* Dark Theme */
            html[data-theme="dark"] {
                --glass-bg: rgba(10, 20, 40, 0.65);
                --glass-border: rgba(255, 255, 255, 0.2);
                --glass-blur: blur(14px) saturate(150%);
                --accent-color: rgba(76, 147, 255, 0.65);
                --accent-border: rgba(76, 147, 255, 0.75);
                --text-primary: #f5f7fa;
                --text-secondary: rgba(200, 210, 230, 0.85);
                --glow-halo: rgba(255, 255, 255, 0.35);
                --button-glow: rgba(76, 147, 255, 0.4); /* Darker blue glow for dark mode */
                --button-gradient-start: #1e3a5f; /* Dark blue for dark mode */
                --button-gradient-end: #0a192f; /* Even darker blue for dark mode */
                --button-gradient-disabled-start: rgba(30, 58, 95, 0.5);
                --button-gradient-disabled-end: rgba(10, 25, 47, 0.5);
                --button-after-highlight: rgba(255, 255, 255, 0.2); /* Light highlight for dark mode */
            }

            /* Fallback for Unsupported Browsers */
            @supports not (backdrop-filter: blur(14px)) {
                html[data-theme="dark"] { --glass-bg: rgba(10, 20, 40, 0.85); }
                html[data-theme="light"] { --glass-bg: rgba(245, 245, 245, 0.75); }
            }

            /* Theme Transition Animation */
            [data-theme] {
                transition: background-color 0.5s var(--transition-ease), color 0.5s var(--transition-ease), border-color 0.5s var(--transition-ease);
            }

            /* Chat Button */
            #quantimis-chat-button {
                position: fixed;
                bottom: calc(var(--spacing-unit) * 3);
                right: calc(var(--spacing-unit) * 3);
                z-index: 2147483647;
                width: 64px;
                height: 64px;
                border-radius: 50%;
                background: var(--glass-bg);
                border: 1.5px solid var(--glass-border);
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                box-shadow: 0 4px 12px var(--shadow-light), 0 0 8px var(--light-blue-glow);
                transition: transform var(--transition-ease), box-shadow var(--transition-ease);
                will-change: transform, box-shadow;
            }

            #quantimis-chat-button:hover {
                transform: translateY(-3px);
                box-shadow: 0 6px 16px var(--shadow-light), 0 0 12px var(--light-blue-glow);
            }

            #quantimis-chat-button:active {
                transform: scale(0.95);
                box-shadow: 0 2px 6px var(--shadow-light), 0 0 6px var(--light-blue-glow);
                transition: transform 0.1s ease, box-shadow 0.1s ease;
            }

            #quantimis-chat-button img {
                width: 40px;
                height: 40px;
                object-fit: contain;
                filter: brightness(0) invert(1) contrast(155%) saturate(145%); /* Fallback to white */
                transition: filter 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
                will-change: filter;
            }

            /* Light Mode Chat Button Image */
            html[data-theme="light"] #quantimis-chat-button img {
                filter: brightness(0) invert(0) contrast(155%) saturate(145%) !important; /* Black */
            }

            /* Dark Mode Chat Button Image */
            html[data-theme="dark"] #quantimis-chat-button img {
                filter: brightness(0) invert(1) contrast(155%) saturate(145%) !important; /* White */
            }

            /* Mobile Fixes for Chat Button */
            @media (max-width: 768px) {
                #quantimis-chat-button {
                    bottom: calc(var(--spacing-unit) * 1.5);
                    right: calc(var(--spacing-unit) * 1.5);
                    width: 52px;
                    height: 52px;
                }

                #quantimis-chat-button img {
                    width: 32px;
                    height: 32px;
                }
            }

            /* Chat Widget */
            #quantimis-chatbox {
                position: fixed;
                bottom: calc(64px + 4 * var(--spacing-unit));
                right: calc(var(--spacing-unit) * 3);
                width: clamp(340px, 90vw, 420px);
                max-height: 85vh;
                height: auto;
                min-height: 420px;
                background: linear-gradient(145deg, var(--glass-bg) 0%, color-mix(in srgb, var(--glass-bg) 85%, var(--accent-color)) 100%);
                backdrop-filter: var(--glass-blur);
                border-radius: var(--border-radius);
                overflow: hidden;
                display: none;
                flex-direction: column;
                box-shadow: 0 10px 36px var(--shadow-dark), 0 0 12px var(--glow-halo);
                border: 1.5px solid var(--glass-border);
                z-index: 2147483646;
                animation: qm-slidePop 0.5s cubic-bezier(0.4, 0, 0.2, 1);
                will-change: transform, opacity;
            }

            @keyframes qm-slidePop {
                0% { opacity: 0; transform: translateY(24px) scale(0.95); }
                60% { opacity: 1; transform: translateY(-4px) scale(1.02); }
                100% { opacity: 1; transform: translateY(0) scale(1); }
            }

            #quantimis-chatbox.show {
                display: flex;
            }

            #quantimis-chatbox.closing {
                animation: qm-slidePopOut 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
            }

            @keyframes qm-slidePopOut {
                0% { opacity: 1; transform: translateY(0) scale(1); }
                40% { opacity: 1; transform: translateY(4px) scale(1.02); }
                100% { opacity: 0; transform: translateY(24px) scale(0.95); }
            }

            /* Mobile Fixes for Chat Widget */
            @media (max-width: 768px) {
                #quantimis-chatbox {
                    width: 100vw;
                    height: 100dvh;
                    bottom: 0;
                    right: 0;
                    border-radius: 0;
                    max-height: none;
                    animation: qm-slidePopMobile 0.5s cubic-bezier(0.4, 0, 0.2, 1);
                }

                @keyframes qm-slidePopMobile {
                    0% { opacity: 0; transform: translateY(50%); }
                    60% { opacity: 1; transform: translateY(-2%) scale(1.01); }
                    100% { opacity: 1; transform: translateY(0) scale(1); }
                }

                #quantimis-chatbox.closing {
                    animation: qm-slidePopOutMobile 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
                }

                @keyframes qm-slidePopOutMobile {
                    0% { opacity: 1; transform: translateY(0) scale(1); }
                    40% { opacity: 1; transform: translateY(2%) scale(1.01); }
                    100% { opacity: 0; transform: translateY(50%); }
                }
            }

            /* Header */
            #chat-header {
                background: linear-gradient(145deg, var(--glass-bg) 0%, color-mix(in srgb, var(--glass-bg) 80%, var(--accent-color)) 100%);
                backdrop-filter: var(--glass-blur);
                border-bottom: 1.5px solid var(--glass-border);
                padding: var(--spacing-unit) calc(var(--spacing-unit) * 2);
                display: flex;
                align-items: center;
                justify-content: space-between;
                min-height: 60px;
                position: relative;
                box-shadow: 0 2px 8px var(--shadow-light);
                transition: background var(--transition-ease);
                will-change: background;
            }

            #chat-header:hover {
                background: linear-gradient(145deg, color-mix(in srgb, var(--glass-bg) 85%, var(--accent-color)) 0%, var(--glass-bg) 100%);
            }

            #chat-header.typing {
                background: linear-gradient(90deg, var(--glass-bg) 40%, var(--accent-color) 100%);
                animation: qm-shimmer 1.6s infinite linear;
            }

            @keyframes qm-shimmer {
                0% { background-position: 250% 0; }
                100% { background-position: -250% 0; }
            }

            .header-content {
                display: flex;
                align-items: center;
                gap: calc(var(--spacing-unit) * 1.2);
            }

            .header-title {
                color: var(--text-primary);
                font-size: calc(var(--font-size-base) * 1.2);
                font-weight: 700;
                letter-spacing: -0.015em;
            }

            .chat-status {
                color: var(--text-secondary);
                font-size: calc(var(--font-size-base) * 0.85);
                font-weight: 500;
            }

            #chat-header img {
                width: 42px;
                height: 42px;
                object-fit: contain;
                border-radius: 50%;
                padding: 6px;
                filter: brightness(0) invert(1) contrast(155%) saturate(145%); /* Fallback to white */
                transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1),
                            filter 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
                will-change: transform, filter;
            }

            /* Light Mode Specific Styles */
            html[data-theme="light"] #chat-header img {
                filter: brightness(0) invert(0) contrast(155%) saturate(145%) !important; /* Black */
            }

            /* Dark Mode Specific Styles */
            html[data-theme="dark"] #chat-header img {
                filter: brightness(0) invert(1) contrast(155%) saturate(145%) !important; /* White */
            }

            #chat-header img.theme-toggle {
                transform: rotate(360deg) scale(1.25);
                transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1),
                            filter 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
            }

            /* Light Mode Theme-Toggle */
            html[data-theme="light"] #chat-header img.theme-toggle {
                filter: brightness(0) invert(0) contrast(155%) saturate(145%) !important; /* Black */
            }

            /* Dark Mode Theme-Toggle */
            html[data-theme="dark"] #chat-header img.theme-toggle {
                filter: brightness(0) invert(1) contrast(155%) saturate(145%) !important; /* White */
            }

            /* Close and Refresh Buttons */
            #chat-close, #chat-refresh {
                background: var(--glass-bg);
                border: 1.5px solid var(--glass-border);
                border-radius: 50%;
                cursor: pointer;
                padding: 6px;
                width: 34px;
                height: 34px;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: background var(--transition-ease), transform var(--transition-ease), box-shadow var(--transition-ease);
                will-change: transform, background, box-shadow;
            }

            #chat-close {
                position: absolute;
                right: calc(var(--spacing-unit) * 2);
                top: calc(var(--spacing-unit) * 1.5);
            }

            #chat-refresh {
                position: absolute;
                right: calc(var(--spacing-unit) * 7.5);
                top: calc(var(--spacing-unit) * 1.5);
            }

            #chat-close:hover, #chat-refresh:hover {
                background: var(--accent-color);
                transform: scale(1.1);
                box-shadow: 0 3px 12px var(--glow-halo);
            }

            #chat-close svg, #chat-refresh svg {
                width: 16px;
                height: 16px;
                stroke: var(--text-primary);
            }

            /* Messages Container */
            #chat-messages {
                flex: 1;
                padding: calc(var(--spacing-unit) * 2);
                overflow-y: auto;
                background: var(--glass-bg);
                backdrop-filter: var(--glass-blur);
                scrollbar-width: thin;
                scrollbar-color: var(--text-secondary) transparent;
                overscroll-behavior: contain;
                scroll-behavior: smooth;
            }

            #chat-messages::-webkit-scrollbar {
                width: 6px;
            }

            #chat-messages::-webkit-scrollbar-thumb {
                background: var(--text-secondary);
                border-radius: 3px;
            }

            #chat-messages::-webkit-scrollbar-thumb:hover {
                background: var(--accent-color);
            }

            /* Message Bubbles */
            .bot, .user {
                margin: calc(var(--spacing-unit) * 1.2) 0;
                padding: calc(var(--spacing-unit) * 1.2) calc(var(--spacing-unit) * 2);
                border-radius: 12px;
                max-width: 80%;
                line-height: 1.65;
                font-size: var(--font-size-base);
                color: var(--text-primary);
                word-break: break-word;
                background: linear-gradient(145deg, var(--glass-bg) 0%, color-mix(in srgb, var(--glass-bg) 90%, var(--accent-color)) 100%);
                border: 1.5px solid var(--glass-border);
                box-shadow: 0 0 12px var(--button-glow);
                animation: qm-messagePop 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
                            background 0.4s cubic-bezier(0.25, 0.1, 0.25, 1),
                            box-shadow 0.4s cubic-bezier(0.25, 0.1, 0.25, 1),
                            backdrop-filter 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
                will-change: transform, background, box-shadow, backdrop-filter;
                position: relative;
            }

            /* Light Mode Specific Styles for Message Bubbles */
            html[data-theme="light"] .bot,
            html[data-theme="light"] .user {
                box-shadow: 0 0 18px rgba(37, 99, 235, 0.55), 0 0 28px rgba(37, 99, 235, 0.35); /* Stronger, softer glow */
            }

            /* Dark Mode Specific Styles for Message Bubbles */
            html[data-theme="dark"] .bot,
            html[data-theme="dark"] .user {
                box-shadow: 0 0 12px var(--button-glow); /* Maintain original glow for dark mode */
            }

            .bot {
                border-radius: 12px 12px 12px 4px;
                margin-right: calc(var(--spacing-unit) * 1.5);
            }

            .bot:hover {
                transform: scale(1.015) translateY(-2px);
                background: linear-gradient(145deg, color-mix(in srgb, var(--glass-bg) 95%, var(--accent-color)) 0%, var(--glass-bg) 100%);
                backdrop-filter: blur(20px) saturate(200%); /* Crisper glassy effect */
                box-shadow: 0 4px 18px rgba(37, 99, 235, 0.65); /* Stronger hover glow */
            }

            .user {
                border-radius: 12px 12px 4px 12px;
                margin-left: auto;
                margin-right: calc(var(--spacing-unit) * 1.5);
            }

            .user:hover {
                transform: scale(1.015) translateY(-2px);
                background: linear-gradient(145deg, color-mix(in srgb, var(--accent-color) 95%, var(--glass-bg)) 0%, var(--glass-bg) 100%);
                backdrop-filter: blur(20px) saturate(200%); /* Crisper glassy effect */
                box-shadow: 0 4px 18px rgba(37, 99, 235, 0.65); /* Stronger hover glow */
            }

            /* Timestamp Positioning */
            .message-timestamp {
                position: absolute;
                bottom: 5px;
                right: 10px;
                font-size: calc(var(--font-size-base) * 0.7);
                color: var(--text-secondary);
                opacity: 0.8;
            }

            /* Input Area */
            #chat-input {
                display: flex;
                gap: calc(var(--spacing-unit) * 1.2);
                padding: calc(var(--spacing-unit) * 2);
                background: var(--glass-bg);
                backdrop-filter: var(--glass-blur);
                border-top: 1.5px solid var(--glass-border);
            }

            #chat-input input {
                flex: 1;
                padding: calc(var(--spacing-unit) * 1.2) calc(var(--spacing-unit) * 2);
                font-size: var(--font-size-base);
                border: 1.5px solid var(--glass-border);
                border-radius: 10px;
                background: var(--glass-bg);
                backdrop-filter: var(--glass-blur);
                color: var(--text-primary);
                transition: border-color var(--transition-ease), box-shadow var(--transition-ease);
                box-shadow: 0 0 4px var(--button-glow); /* Thinner glow for input */
                will-change: border-color, box-shadow;
            }

            #chat-input input:focus {
                border-color: var(--accent-border);
                box-shadow: 0 0 6px var(--button-glow); /* Slightly stronger glow on focus */
                outline: none;
            }

            #chat-input input::placeholder {
                color: var(--text-secondary);
                opacity: 0.75;
            }

            #chat-input input:invalid {
                border-color: rgba(239, 68, 68, 0.6);
                box-shadow: 0 0 4px rgba(239, 68, 68, 0.25);
            }

            /* Send Message Button */
            #chat-input button {
                padding: calc(var(--spacing-unit) * 0.8);
                background: linear-gradient(135deg, var(--button-gradient-start) 0%, var(--button-gradient-end) 100%);
                border: 1.5px solid var(--glass-border);
                border-radius: 50%;
                cursor: pointer;
                width: 52px;
                height: 52px;
                display: flex;
                align-items: center;
                justify-content: center;
                position: relative;
                overflow: hidden;
                backdrop-filter: var(--glass-blur);
                box-shadow: 0 4px 12px var(--shadow-light), 0 0 8px var(--button-glow);
                transition: transform var(--transition-ease), box-shadow var(--transition-ease), background var(--transition-ease);
                will-change: transform, box-shadow, background;
            }

            #chat-input button::before {
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                width: 120%;
                height: 120%;
                background: radial-gradient(circle, var(--button-glow) 10%, transparent 70%);
                transform: translate(-50%, -50%) scale(0);
                opacity: 0;
                transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                will-change: transform, opacity;
            }

            #chat-input button::after {
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                width: 100%;
                height: 100%;
                background: radial-gradient(circle, var(--button-after-highlight) 0%, transparent 80%);
                transform: translate(-50%, -50%) scale(0);
                opacity: 0;
                transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                will-change: transform, opacity;
            }

            #chat-input button:hover {
                background: linear-gradient(135deg, var(--button-gradient-end) 0%, var(--button-gradient-start) 100%);
                transform: translateY(-2px) scale(1.08);
                box-shadow: 0 6px 16px var(--shadow-light), 0 0 12px var(--button-glow);
                animation: qm-pulse 1.5s infinite cubic-bezier(0.4, 0, 0.2, 1);
            }

            @keyframes qm-pulse {
                0%, 100% { box-shadow: 0 4px 12px var(--shadow-light), 0 0 8px var(--button-glow); }
                50% { box-shadow: 0 6px 16px var(--shadow-light), 0 0 16px var(--button-glow); }
            }

            #chat-input button:hover::before {
                transform: translate(-50%, -50%) scale(1);
                opacity: 0.4;
            }

            #chat-input button:active {
                transform: scale(0.95);
                box-shadow: 0 2px 8px var(--shadow-light), 0 0 4px var(--button-glow);
                transition: transform 0.1s ease, box-shadow 0.1s ease;
            }

            #chat-input button:active::after {
                transform: translate(-50%, -50%) scale(1);
                opacity: 0.3;
                transition: transform 0.2s ease, opacity 0.2s ease;
            }

            #chat-input button:disabled {
                background: linear-gradient(135deg, var(--button-gradient-disabled-start) 0%, var(--button-gradient-disabled-end) 100%);
                opacity: 0.5;
                cursor: not-allowed;
                transform: none;
                box-shadow: none;
                animation: none;
            }

            #chat-input button:disabled::before,
            #chat-input button:disabled::after {
                opacity: 0;
            }

            #chat-input button svg {
                width: 24px;
                height: 24px;
                stroke: var(--text-primary);
                stroke-width: 2.5;
                transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                will-change: transform;
            }

            #chat-input button:hover svg {
                transform: scale(1.15);
            }

            #chat-input button:disabled svg {
                stroke: var(--text-secondary);
            }

            /* Typing Indicator */
            .typing-indicator {
                padding: calc(var(--spacing-unit) * 1.2) calc(var(--spacing-unit) * 2);
                background: var(--glass-bg);
                border: 1.5px solid var(--glass-border);
                border-radius: 12px 12px 12px 4px;
                margin: calc(var(--spacing-unit) * 1.2) calc(var(--spacing-unit) * 1.5);
                max-width: 80%;
                display: flex;
                align-items: center;
                gap: 6px;
                animation: qm-messagePop 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                box-shadow: 0 0 10px var(--button-glow); /* Glow for typing indicator */
                will-change: transform, opacity;
            }

            .typing-dots {
                display: flex;
                gap: 5px;
            }

            .typing-dots .dot {
                width: 6px;
                height: 6px;
                background: var(--text-primary);
                border-radius: 50%;
                animation: qm-typingBounce 1s infinite cubic-bezier(0.4, 0, 0.2, 1);
                will-change: transform, opacity;
            }

            .typing-dots .dot:nth-child(1) { animation-delay: -0.3s; }
            .typing-dots .dot:nth-child(2) { animation-delay: -0.15s; }
            .typing-dots .dot:nth-child(3) { animation-delay: 0s; }

            @keyframes qm-typingBounce {
                0%, 80% { transform: translateY(0); opacity: 0.7; }
                40% { transform: translateY(-4px); opacity: 1; }
            }

            .typing-text {
                font-size: calc(var(--font-size-base) * 0.9);
                color: var(--text-secondary);
                font-style: italic;
            }

            /* Message Status and Timestamps */
            .message-status {
                font-size: calc(var(--font-size-base) * 0.75);
                opacity: 0.65;
                color: var(--text-secondary);
            }

            /* System and Error Messages */
            .system-message {
                background: var(--glass-bg);
                border: 1.5px solid var(--glass-border);
                border-radius: 10px;
                padding: calc(var(--spacing-unit) * 1.2) calc(var(--spacing-unit) * 1.5);
                margin: calc(var(--spacing-unit) * 1.2) auto;
                text-align: center;
                font-size: calc(var(--font-size-base) * 0.85);
                color: var(--text-secondary);
                box-shadow: 0 0 10px var(--button-glow); /* Glow for system messages */
            }

            .error-message {
                background: rgba(239, 68, 68, 0.25);
                border: 1.5px solid rgba(239, 68, 68, 0.35);
                color: #dc2626;
                border-radius: 10px;
                padding: calc(var(--spacing-unit) * 1.2) calc(var(--spacing-unit) * 1.5);
                margin: calc(var(--spacing-unit) * 1.2) auto;
                font-size: calc(var(--font-size-base) * 0.85);
                box-shadow: 0 0 10px rgba(239, 68, 68, 0.3); /* Glow for error messages */
            }

            /* Premium Intro Message */
            .bot.intro-message {
                background: linear-gradient(145deg, var(--accent-color) 0%, color-mix(in srgb, var(--accent-color) 70%, var(--glass-bg)) 100%);
                border: 1.5px solid var(--glass-border);
                border-radius: 14px;
                padding: calc(var(--spacing-unit) * 2);
                max-width: 85%;
                box-shadow: 0 4px 16px var(--button-glow); /* Glow for intro message */
                margin: calc(var(--spacing-unit) * 2) auto;
                backdrop-filter: var(--glass-blur);
                color: var(--text-primary);
                font-size: var(--font-size-base);
                line-height: 1.65;
                animation: qm-messagePop 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            }

            .intro-message .welcome-text {
                font-size: calc(var(--font-size-base) * 1.2);
                font-weight: 700;
                margin-bottom: 8px;
            }

            .intro-message .sub-text {
                font-size: calc(var(--font-size-base) * 0.9);
                color: var(--text-secondary);
            }

            /* Responsive Design */
            @media (max-width: 640px) {
                #quantimis-chat-button {
                    bottom: calc(var(--spacing-unit) * 1.5);
                    right: calc(var(--spacing-unit) * 1.5);
                    width: 52px;
                    height: 52px;
                }

                #quantimis-chat-button::after {
                    background-size: 55%;
                }

                #chat-header {
                    padding: calc(var(--spacing-unit) * 0.8) calc(var(--spacing-unit) * 1.5);
                    min-height: 52px;
                }

                .header-title {
                    font-size: calc(var(--font-size-base) * 1.15);
                }

                .chat-status {
                    font-size: calc(var(--font-size-base) * 0.8);
                }

                #chat-close, #chat-refresh {
                    width: 30px;
                    height: 30px;
                    padding: 5px;
                }

                #chat-close svg, #chat-refresh svg {
                    width: 14px;
                    height: 14px;
                }

                #chat-messages {
                    padding: calc(var(--spacing-unit) * 1.5);
                }

                .bot, .user {
                    max-width: 85%;
                    padding: calc(var(--spacing-unit) * 0.8) calc(var(--spacing-unit) * 1.5);
                    font-size: calc(var(--font-size-base) * 0.95);
                }

                #chat-input {
                    padding: calc(var(--spacing-unit) * 1.5);
                    gap: 8px;
                }

                #chat-input input {
                    padding: calc(var(--spacing-unit) * 0.8) calc(var(--spacing-unit) * 1.5);
                    font-size: calc(var(--font-size-base) * 0.95);
                }

                #chat-input button {
                    width: 44px;
                    height: 44px;
                    padding: calc(var(--spacing-unit) * 0.6);
                }

                #chat-input button svg {
                    width: 20px;
                    height: 20px;
                }

                .bot.intro-message {
                    padding: calc(var(--spacing-unit) * 1.5);
                    max-width: 90%;
                }

                .intro-message .welcome-text {
                    font-size: calc(var(--font-size-base) * 1.15);
                }

                .intro-message .sub-text {
                    font-size: calc(var(--font-size-base) * 0.85);
                }
            }

            /* Accessibility */
            @media (prefers-reduced-motion: reduce) {
                #quantimis-chatbox,
                #quantimis-chat-button,
                #quantimis-chat-button::before,
                #quantimis-chat-button::after,
                .bot,
                .user,
                .typing-indicator,
                .typing-dots .dot,
                #chat-header img,
                #chat-input button,
                #chat-input button::before,
                #chat-input button::after,
                #chat-input button svg {
                    animation: none !important;
                    transition: none !important;
                }
            }

            @media (prefers-contrast: high) {
                #quantimis-chatbox,
                #quantimis-chat-button {
                    border: 2px solid var(--text-primary);
                    background: var(--glass-bg);
                    backdrop-filter: none;
                    box-shadow: none;
                }

                #quantimis-chat-button::before,
                #quantimis-chat-button::after {
                    display: none;
                }

                .bot, .user, .bot.intro-message {
                    border: 2px solid var(--text-primary);
                    background: var(--glass-bg);
                    box-shadow: none;
                }

                #chat-close, #chat-refresh, #chat-input button {
                    border: 2px solid var(--text-primary);
                    background: var(--glass-bg);
                    box-shadow: none;
                }

                #chat-input button::before,
                #chat-input button::after {
                    display: none;
                }

                .system-message, .error-message {
                    border: 2px solid var(--text-primary);
                    color: var(--text-primary);
                }

                #chat-header img {
                    filter: brightness(0) invert(1);
                    background: none;
                }
            }

            @media print {
                .bot.intro-message {
                    background: none;
                    border: 1px solid #000;
                    box-shadow: none;
                    color: #000;
                }

                .intro-message .welcome-text,
                .intro-message .sub-text {
                    color: #000;
                }

                #quantimis-chat-button, #chat-close, #chat-refresh, #chat-input button {
                    display: none;
                }

                #chat-header img {
                    filter: brightness(0) invert(0);
                    background: none;
                }
            }

            /* New Message Notification for Chat Button */
      #quantimis-chat-button.new-message {
          animation: qm-newMessagePulse 1.5s infinite;
          box-shadow: 0 4px 12px var(--shadow-light),
                      0 0 20px var(--button-glow),
                      0 0 40px rgba(76, 147, 255, 0.3);
      }

      @keyframes qm-newMessagePulse {
          0%, 100% {
              transform: scale(1);
              box-shadow: 0 4px 12px var(--shadow-light),
                          0 0 8px var(--light-blue-glow);
          }
          50% {
              transform: scale(1.08);
              box-shadow: 0 6px 16px var(--shadow-light),
                          0 0 20px var(--button-glow),
                          0 0 40px rgba(76, 147, 255, 0.4);
          }
      }

      /* Remove notification animation on hover to prevent conflict */
      #quantimis-chat-button.new-message:hover {
          animation: none;
          transform: translateY(-3px);
          box-shadow: 0 6px 16px var(--shadow-light),
                      0 0 12px var(--light-blue-glow);
      }

      /* Respect reduced motion preferences */
      @media (prefers-reduced-motion: reduce) {
          #quantimis-chat-button.new-message {
              animation: none !important;
              box-shadow: 0 4px 12px var(--shadow-light),
                          0 0 12px var(--button-glow);
          }
      }
            #chat-send:disabled {
          opacity: 0.5 !important;
          cursor: not-allowed !important;
          background: linear-gradient(135deg, var(--button-gradient-disabled-start) 0%, var(--button-gradient-disabled-end) 100%) !important;
          box-shadow: none !important;
          animation: none !important;
          transform: none !important;
      }

      #chat-send:disabled svg {
          stroke: var(--text-secondary) !important;
          opacity: 0.6;
      }

      /* Offline status styling */
      .chat-status[data-status="offline"] {
          color: #ef4444 !important;
          font-weight: 600;
      }

      .chat-status[data-status="online"] {
          color: #10b981 !important;
          font-weight: 500;
      }
            .chat-status.online {
          color: #10b981 !important;
          font-weight: 500;
      }

      .chat-status.offline {
          color: #ef4444 !important;
          font-weight: 600;
          animation: pulse-red 2s infinite;
      }

      @keyframes pulse-red {
          0%, 100% { opacity: 1; }
          50% { opacity: 0.7; }
      }

            /* ARIA Enhancements */
            #quantimis-chat-button { aria-label: "Open chat window"; }
            #chat-close { aria-label: "Close chat window"; }
            #chat-refresh { aria-label: "Refresh chat"; }
            #chat-input input { aria-label: "Type your message"; }
            #chat-input button { aria-label: "Send message"; }