* { box-sizing: border-box; }
        body { margin: 0; font-family: 'Segoe UI', sans-serif; background: transparent; }

        /* Chat Bubble */
        #chatBubble {
            position: fixed;
            bottom: 100px;
            left: 24px;
            background-color: #fff;
            border-radius: 16px;
            padding: 10px 14px;
            display: flex;
            align-items: center;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
            gap: 10px;
            z-index: 998;
            cursor: pointer;
            max-width: calc(100% - 48px); /* Adjusted for better fit on small screens */
            transition: all 0.3s ease;
        }

        #chatBubble img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
        }

        #chatBubble span {
            color: #333;
            font-size: 15px;
            font-weight: 500;
            white-space: nowrap; /* Prevent text wrapping */
            overflow: hidden; /* Hide overflow text */
            text-overflow: ellipsis; /* Add ellipsis for overflow text */
        }

        /* Chat Icon */
        #chatToggle {
            position: fixed;
            bottom: 20px;
            left: 24px;
            background: #0058f5;
            border: none;
            border-radius: 50%;
            width: 64px;
            height: 64px;
            box-shadow: 0 8px 20px rgba(0,0,0,0.3);
            cursor: pointer;
            z-index: 999;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.3s ease;
            animation: pulse 2s infinite ease-in-out; /* Add this line */
        }

        #chatToggle:hover {
            transform: scale(1.1);
        }

        #chatToggle svg {
            fill: white;
            width: 28px;
            height: 28px;
        }

        /* Chat Widget Panel */
        #chatWidget {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            top: 0; /* Set top to 0 for full height on mobile */
            background: #fff;
            padding: 20px;
            z-index: 1000;
            overflow-y: auto;
            box-shadow: 0 0 10px rgba(0,0,0,0.1); /* Added subtle shadow for contrast */
            display: flex; /* Use flex for vertical alignment */
            flex-direction: column;
            justify-content: space-between; /* Pushes powered-by to the bottom */

            /* Initial state: hidden and off-screen */
            transform: translateY(100%);
            transition: transform 0.3s ease-out;
            visibility: hidden; /* Hide it completely until needed */
            opacity: 0; /* Fade out initially */
        }

        #chatWidget.open {
            transform: translateY(0); /* Slide in */
            visibility: visible; /* Make visible */
            opacity: 1; /* Fade in */
        }

        @keyframes slideUp { /* This animation is no longer used due to transform-based animation */
            from { transform: translateY(20px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }

        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); } /* Slightly enlarge */
            100% { transform: scale(1); }
        }

        @media (min-width: 768px) {
            #chatWidget {
                width: 360px;
                height: auto; /* Revert to auto for larger screens */
                bottom: 100px;
                left: 24px;
                top: auto; /* Reset top for larger screens */
                border-radius: 16px;
                transform: translateY(0); /* No translation needed for desktop */
                flex-direction: column; /* Keep flex direction */
                justify-content: flex-start; /* Revert to default content alignment */
                visibility: hidden; /* Ensure it starts hidden on desktop too */
                opacity: 0; /* Ensure it starts faded on desktop too */
            }
            #chatWidget.open {
                transform: translateY(0);
                visibility: visible;
                opacity: 1;
            }
        }

        #chatWidget h3 {
            margin: 0 0 16px;
            font-size: 18px;
            color: #333;
            text-align: center;
        }

        #chatWidget input, #chatWidget select {
            width: 100%;
            padding: 12px;
            margin-bottom: 12px;
            border-radius: 8px;
            border: 1px solid #ccc;
            font-size: 14px;
        }

        .chat-actions {
            display: flex;
            justify-content: space-between;
            gap: 10px;
        }

        .chat-actions button {
            flex: 1;
            padding: 12px;
            border-radius: 8px;
            border: none;
            font-weight: bold;
            font-size: 14px;
            cursor: pointer;
        }

        #sendWhatsapp { background-color: #25D366; color: white; }
        #sendMessage { background-color: #007bff; color: white; }

        /* Style for offline chat options - these styles will now only affect appearance, not disable functionality */
        .offline-message-btn {
            background-color: #6c757d !important; /* Grey out when offline */
        }

        #backBtn, #backToStep2 {
            background: transparent;
            color: #000;
            border: 2px solid #000;
            padding: 10px;
            border-radius: 8px;
            cursor: pointer;
            width: 100%;
            margin-bottom: 10px;
            font-size: 15px;
        }

        #nextStep {
            width: 100%;
            padding: 12px;
            background: #0058f5;
            color: white;
            font-weight: bold;
            font-size: 15px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
        }

#closeBtn {
    position: absolute;
    top: 10px;
    right: 14px;
    /* Increase font size */
    font-size: 24px; /* Increased from 18px to 24px */
    font-weight: bold;
    /* Make color darker for better contrast */
    color: #555; /* Changed from #999 to #555 */
    cursor: pointer;
    /* Add a background and padding for better clickability and visibility */
    background-color: #f0f0f0;
    border-radius: 50%; /* Make it a circle */
    width: 30px; /* Set a fixed width */
    height: 30px; /* Set a fixed height */
    display: flex; /* Use flexbox to center the 'x' */
    align-items: center;
    justify-content: center;
    line-height: 1; /* Adjust line-height to vertically center the 'x' */
    transition: background-color 0.2s ease; /* Smooth transition for hover */
}

#closeBtn:hover {
    background-color: #e0e0e0; /* Darken background on hover */
    color: #333; /* Darken 'x' color on hover */
}

        .agent-photos {
            display: flex;
            justify-content: center;
            padding: 0 5px; /* Add slight horizontal padding to contain images */
            box-sizing: border-box; /* Include padding in element's total width */
        }

        .agent-photos img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #eee;
            margin: 0 -5px; /* Negative margin to create a subtle overlap effect */
            flex-shrink: 0; /* Prevent images from shrinking on smaller screens */
        }

        /* Target specific image for slight adjustment if needed, e.g., the first one */
        .agent-photos img:first-child {
            margin-left: 0; /* Remove negative margin for the first image */
        }
        .agent-photos img:last-child {
            margin-right: 0; /* Remove negative margin for the last image */
        }

        .status-text {
            text-align: center; /* Center the entire block */
            margin-bottom: 16px; /* Add some space below it */
        }

        .status-text strong {
            font-size: 15px;
            display: block; /* Ensures it takes full width for centering */
        }
        .status-text .online {
            color: #28a745; /* Green for online */
        }
        .status-text .offline {
            color: #dc3545; /* Red for offline */
        }
        .status-text span {
            font-size: 12px;
            color: #777;
            display: block; /* Ensures it takes full width for centering */
        }

        .powered-by {
            margin-top: 12px;
            text-align: center;
            font-size: 11px;
            color: #aaa;
        }

        #step3 button.chatTypeBtn {
            width: 100%;
            margin-bottom: 10px;
            padding: 12px;
            font-size: 14px;
            font-weight: bold;
            border: none;
            border-radius: 8px;
            cursor: pointer;
        }
        /* Specific colors for online/offline chat type buttons */
        #step3 button.chatTypeBtn.online-btn {
            background-color: #25D366; /* WhatsApp green */
            color: white;
        }
        #step3 button.chatTypeBtn.offline-btn {
            background-color: #6c757d; /* Grey for offline */
            /* cursor: not-allowed; -- Removed this as per your request to keep clickable */
        }

        .avatar-wrapper {
            position: relative;
            width: 40px;
            height: 40px;
        }

        .online-dot {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 10px;
            height: 10px;
            background-color: #28a745; /* green */
            border: 2px solid #fff;
            border-radius: 50%;
        }
        .offline-dot {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 10px;
            height: 10px;
            background-color: #dc3545; /* red */
            border: 2px solid #fff;
            border-radius: 50%;
        }

        /* Error message style */
        .error-message {
            color: red;
            font-size: 12px;
            margin-top: -8px;
            margin-bottom: 8px;
            display: none; /* Hidden by default */
        }