:root {
            --chat-primary-hue: 210;
            --chat-primary-saturation: 100%;
            --chat-primary-lightness: 50%;
            --chat-primary-color: hsl(var(--chat-primary-hue), var(--chat-primary-saturation), var(--chat-primary-lightness));
            --chat-primary-color-dark: hsl(var(--chat-primary-hue), var(--chat-primary-saturation), calc(var(--chat-primary-lightness) - 10%));
            --chat-primary-color-light: hsl(var(--chat-primary-hue), var(--chat-primary-saturation), calc(var(--chat-primary-lightness) + 15%));
            --chat-primary-color-translucent: hsla(var(--chat-primary-hue), var(--chat-primary-saturation), var(--chat-primary-lightness), 0.1);
            --chat-primary-color-ripple: hsla(var(--chat-primary-hue), var(--chat-primary-saturation), calc(var(--chat-primary-lightness) + 20%), 0.4);
            --chat-success-hue: 134;
            --chat-success-color: hsl(var(--chat-success-hue), 61%, 41%);
            --chat-success-color-dark: hsl(var(--chat-success-hue), 61%, 31%);
            --chat-text-light: #ffffff;
            --chat-text-dark: #212529;
            --chat-bubble-bg: #ffffff;
            --chat-bubble-text: var(--chat-text-dark);
            --chat-bubble-border: #dee2e6;
            --chat-fab-size: 56px;
            --chat-icon-size: 24px;
            --chat-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
            --chat-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
            --chat-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
            --chat-timing-fast: 0.15s;
            --chat-timing-normal: 0.3s;
            --chat-timing-smooth: 0.4s;
            --chat-ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
            --chat-ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
            --chat-spacing-xs: 6px;
            --chat-spacing-sm: 8px;
            --chat-spacing-md: 12px;
            --chat-spacing-lg: 16px;
            --chat-spacing-xl: 24px;
            --chat-border-radius-xs: 4px;
            --chat-border-radius-sm: 6px;
            --chat-border-radius-md: 10px;
            --chat-bubble-padding-y: var(--chat-spacing-md);
            --chat-bubble-padding-x-start: var(--chat-spacing-lg);
            --chat-bubble-close-btn-size: 28px;
            --chat-bubble-close-btn-offset: var(--chat-spacing-sm);
            --chat-bubble-padding-right-adjusted: calc(var(--chat-bubble-close-btn-size) + var(--chat-bubble-close-btn-offset) + var(--chat-spacing-sm) + var(--chat-spacing-xs) + 1px); /* button + offset + space_to_sep + sep_width + space_after_sep */
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f8f9fa;
        }

        .chat-fab-container {
            position: fixed;
            bottom: var(--chat-spacing-xl);
            right: var(--chat-spacing-xl);
            z-index: 1055;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
        }

        .chat-fab {
            width: var(--chat-fab-size);
            height: var(--chat-fab-size);
            border-radius: 12px; /* Original value */
            background: var(--chat-primary-color);
            color: var(--chat-text-light);
            font-size: var(--chat-icon-size);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            box-shadow: var(--chat-shadow-md);
            border: none;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: transform var(--chat-timing-normal) var(--chat-ease-out-quad), box-shadow var(--chat-timing-normal) var(--chat-ease-out-quad), background-color var(--chat-timing-normal) ease;
            animation: fab-pop-in var(--chat-timing-smooth) var(--chat-ease-out-back) 0.2s backwards;
        }
        
        @keyframes fab-pop-in {
            from { transform: scale(0.3) translateY(30px); opacity: 0; }
            to { transform: scale(1) translateY(0); opacity: 1; }
        }

        .chat-fab::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 5px;
            height: 5px;
            background: var(--chat-primary-color-ripple);
            opacity: 0;
            border-radius: 50%;
            transform: translate(-50%, -50%) scale(1);
            transition: transform var(--chat-timing-smooth) ease, opacity var(--chat-timing-smooth) ease;
        }
        .chat-fab:active::after {
            transform: translate(-50%, -50%) scale(100);
            opacity: 1;
            transition: transform 0s, opacity 0s;
        }
        .chat-fab:active {
             background-color: var(--chat-primary-color-dark);
        }

        .chat-fab i {
            transition: transform var(--chat-timing-fast) var(--chat-ease-out-quad);
            line-height: 1;
            margin-bottom: 3px;
        }
        
        .chat-fab-dots {
            display: flex;
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
        }

        .chat-fab-dots span {
            width: 4px;
            height: 4px;
            background-color: rgba(255, 255, 255, 0.6);
            border-radius: 50%;
            margin: 0 2px;
            opacity: 0.4;
            transform: scale(0.8);
            animation: typing-indicator 1.4s infinite ease-in-out;
        }

        .chat-fab-dots span:nth-child(1) { animation-delay: 0.0s; }
        .chat-fab-dots span:nth-child(2) { animation-delay: 0.2s; }
        .chat-fab-dots span:nth-child(3) { animation-delay: 0.4s; }

        @keyframes typing-indicator {
            0%, 100% { opacity: 0.4; transform: scale(0.8); }
            40% { opacity: 1; transform: scale(1); }
        }

        .chat-fab:hover,
        .chat-fab:focus-visible {
            transform: translateY(-4px);
            box-shadow: var(--chat-shadow-lg);
            background-color: var(--chat-primary-color-light);
            outline: none;
        }
        .chat-fab:hover i {
             transform: scale(1.1) rotate(-5deg);
        }
        .chat-fab:focus-visible {
             box-shadow: var(--chat-shadow-lg), 0 0 0 3px var(--chat-primary-color-translucent);
        }

        .chat-fab::before {
            content: attr(data-tooltip-text);
            position: absolute;
            bottom: 50%;
            transform: translateY(50%) translateX(-10px);
            right: calc(100% + var(--chat-spacing-md));
            background-color: var(--chat-text-dark);
            color: var(--chat-text-light);
            padding: var(--chat-spacing-xs) var(--chat-spacing-md);
            border-radius: var(--chat-border-radius-sm); /* 6px original */
            font-size: 13px;
            font-weight: 500;
            white-space: nowrap;
            opacity: 0;
            visibility: hidden;
            transition: opacity var(--chat-timing-normal) var(--chat-ease-out-quad), 
                        transform var(--chat-timing-normal) var(--chat-ease-out-quad),
                        visibility var(--chat-timing-normal) ease;
            pointer-events: none;
            box-shadow: var(--chat-shadow-sm);
            z-index: 10000;
        }

        .chat-fab:hover::before {
            opacity: 1;
            visibility: visible;
            transform: translateY(50%) translateX(0);
        }

.chat-fab-badge {
    position: absolute;
    top: 5px;
    right: 4px;
    background-color: #dc3545;
    color: var(--chat-text-light);
    min-width: 18px;
    height: 18px;
    padding: 0px 5px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid var(--chat-bubble-bg);
    box-shadow: var(--chat-shadow-sm);
    transform: scale(0);
    transform-origin: top right;
    transition: transform var(--chat-timing-normal) var(--chat-ease-out-back);
}
        .chat-fab-badge.visible {
             transform: scale(1);
        }
        .chat-fab:hover .chat-fab-badge.visible {
            transform: scale(1.15);
        }

        .chat-fab.chat-loaded,
        .chat-fab.chat-active {
            background-color: var(--chat-success-color);
        }
        .chat-fab.chat-loaded:hover,
        .chat-fab.chat-active:hover,
        .chat-fab.chat-loaded:focus-visible,
        .chat-fab.chat-active:focus-visible {
            background-color: var(--chat-success-color-dark);
            box-shadow: var(--chat-shadow-lg), 0 0 0 3px hsla(var(--chat-success-hue), 61%, 41%, 0.3);
        }

        .chat-encouragement-bubbles {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
        }

        .chat-bubble {
            background-color: var(--chat-bubble-bg);
            color: var(--chat-bubble-text);
            padding: var(--chat-bubble-padding-y) var(--chat-bubble-padding-right-adjusted) var(--chat-bubble-padding-y) var(--chat-bubble-padding-x-start);
            border-radius: var(--chat-border-radius-md); /* 10px original */
            border: 1px solid var(--chat-bubble-border);
            box-shadow: var(--chat-shadow-md);
            margin-bottom: var(--chat-spacing-md);
            font-size: 13.5px;
            line-height: 1.6;
            opacity: 0;
            transform: scale(0.7) translateY(15px) translateX(15px);
            transform-origin: bottom right;
            transition: opacity var(--chat-timing-smooth) var(--chat-ease-out-quad), 
                        transform var(--chat-timing-smooth) var(--chat-ease-out-back);
            position: relative;
            max-width: 320px;
        }
        
        .chat-bubble.visible {
            opacity: 1;
            transform: scale(1) translateY(0) translateX(0);
            animation: float-bubble 4s ease-in-out infinite 0.5s;
        }
        
        @keyframes float-bubble {
            0%, 100% { transform: translateY(0) translateX(0); }
            50% { transform: translateY(-3px) translateX(0); }
        }

        .chat-bubble::after {
            content: '';
            position: absolute;
            bottom: -8px;
            right: 18px;
            width: 14px;
            height: 14px;
            background-color: var(--chat-bubble-bg);
            border: 1px solid var(--chat-bubble-border);
            border-top-color: transparent;
            border-left-color: transparent;
            transform: rotate(45deg); 
            border-bottom-right-radius: 3px;
            z-index: 0;
        }

        .chat-bubble i:not(.chat-bubble-close-btn i) {
            margin-right: var(--chat-spacing-sm);
            color: var(--chat-primary-color);
            font-size: 16px;
        }
        
        .chat-bubble-separator {
            position: absolute;
            top: var(--chat-spacing-sm);
            bottom: var(--chat-spacing-sm);
            right: calc(var(--chat-bubble-close-btn-offset) + var(--chat-bubble-close-btn-size) + var(--chat-spacing-xs)); /* e.g. 8px (btn offset) + 28px (btn width) + 6px (space to separator) = 42px from right edge */
            width: 1px;
            background-color: var(--chat-bubble-border);
            z-index: 1;
        }

        .chat-bubble-close-btn {
            position: absolute;
            top: var(--chat-spacing-sm);
            right: var(--chat-spacing-sm);
            width: var(--chat-bubble-close-btn-size); 
            height: var(--chat-bubble-close-btn-size); 
            background-color: transparent;
            border: none;
            color: #999;
            font-size: 16px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            padding-top: 9px;
            border-radius: 50%;
            transition: color 0.2s ease, background-color 0.2s ease;
            z-index: 1;
        }
        .chat-bubble-close-btn:hover {
            color: #333;
            background-color: rgba(0,0,0,0.07);
        }

        .chat-bubble-close-btn::before {
            content: attr(data-tooltip-text);
            position: absolute;
            bottom: 100%; 
            left: 50%;
            transform: translateX(-50%) translateY(-5px); 
            background-color: var(--chat-text-dark);
            color: var(--chat-text-light);
            padding: var(--chat-spacing-xs) var(--chat-spacing-sm);
            border-radius: 5px; /* Original value */
            font-size: 12px; 
            font-weight: 500;
            white-space: nowrap;
            opacity: 0;
            visibility: hidden;
            transition: opacity var(--chat-timing-normal) var(--chat-ease-out-quad),
                        transform var(--chat-timing-normal) var(--chat-ease-out-quad),
                        visibility var(--chat-timing-normal) ease;
            pointer-events: none;
            box-shadow: var(--chat-shadow-sm);
            z-index: 10002; 
        }

        .chat-bubble-close-btn:hover::before {
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) translateY(-9px); 
        }