/* Chat Container */
        .chat-container {
            background-color: #ffffff;
            /* No border-radius or box-shadow for full-screen */
            display: flex;
            flex-direction: column;
            width: 100%; /* Full width */
            height: 100vh; /* Full viewport height */
            overflow: hidden; /* Ensure content inside is handled by its own scroll */
        }

        /* Chat Header */
        .chat-header {
            display: flex;
            align-items: center; /* Vertically aligns the button and text */
            padding: 10px 15px;
            position: relative; /* Often useful for more complex layouts */ 
            background-color: rgb(64, 64, 65); 
        }

        .chat-header h1 {
            flex-grow: 0.5; /* Takes up remaining space */
            color: white;
            padding: 1rem; 
            text-align: center;
            font-size: 1.5rem; 
            font-weight: 600; 
            /* No rounded corners for full-screen header */
            margin: 0; /* Remove default margin */
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .header-button {
            background-color: #25d366;
            color: white;
            padding: 12px 20px;
            border-radius: 25px;
            margin-left: 10px;
            cursor: pointer;
            font-size: 1rem;
            font-weight: bold;
            border: none; /* Remove default button border */
            transition: background-color 0.3s ease, transform 0.1s ease;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }

        .header-button:disabled {
            background-color: #cccccc; /* Greyed out */
            cursor: not-allowed; /* Change cursor to indicate disabled state */
        }

        .header-button:not(:disabled):hover {
            background-color: #1da851; /* Darker green on hover */
            transform: translateY(-1px); /* Slight lift effect */
        }

        .header-button:active {
            transform: translateY(0); /* Press down effect */
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
        }



        .messages-area {
            flex-grow: 1; /* Tailwind's flex-grow equivalent */
            padding: 20px;
            overflow-y: auto; /* Allow vertical scrolling for messages */
            background-color: #e5ddd5; /* WhatsApp-like background */
            /* Ensure flex items (message bubbles) are aligned correctly */
            display: flex;
            flex-direction: column; /* This makes items stack vertically */
            align-items: flex-start; /* Default alignment for messages (left) */
            scroll-behavior: smooth;
        }

        /* Message Bubbles */
        .message-bubble {
            /* Removed display: inline-block; */
            max-width: 80%; /* Prevents bubbles from becoming too wide */
            padding: 10px 15px;
            border-radius: 18px;
            margin-bottom: 10px;
            word-wrap: break-word; /* Ensures long words break and wrap */
            box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
        }

        .user-message {
            background-color: #dcf8c6; /* Greenish for user */
            align-self: flex-end; /* Align to right */
            margin-left: auto; /* Push to right */
        }

        .bot-message {
            background-color: #ffffff; /* White for bot */
            align-self: flex-start; /* Align to left */
            margin-right: auto; /* Push to left */
        }

        /* Input Area */
        .input-area {
            display: flex;
            padding: 15px;
            background-color: #f0f2f5;
            border-top: 1px solid #e0e0e0;
        }

        .input-area input {
            flex-grow: 1; /* Take up available space */
            padding: 12px 18px;
            border: 1px solid #cccccc;
            border-radius: 25px; /* Rounded corners */
            font-size: 1rem;
            outline: none;
            transition: border-color 0.3s ease;
        }

        .input-area input:focus {
            border-color: #3b82f6; /* Blue border on focus */
        }

        .input-area button {
            background-color: #25d366;
            color: white;
            padding: 12px 20px;
            border-radius: 25px;
            margin-left: 10px;
            cursor: pointer;
            font-size: 1rem;
            font-weight: bold;
            border: none; /* Remove default button border */
            transition: background-color 0.3s ease, transform 0.1s ease;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }
        .input-area button:disabled {
            background-color: #cccccc; /* Greyed out */
            cursor: not-allowed; /* Change cursor to indicate disabled state */
        }

        .input-area button:not(:disabled):hover {
            background-color: #1da851; /* Darker green on hover */
            transform: translateY(-1px); /* Slight lift effect */
        }

        .input-area button:not(:disabled):active {
            transform: translateY(0); /* Press down effect */
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
        }

        /* Styling for the dataframe table */
        .dataframe-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
            background-color: #f9f9f9;
            border-radius: 8px;
            overflow: hidden;
        }
        .dataframe-table th,
        .dataframe-table td {
            border: 1px solid #e0e0e0;
            padding: 8px 12px;
            text-align: left;
        }
        .dataframe-table th {
            background-color: #e0e0e0;
            font-weight: bold;
            color: #333;
            cursor: pointer; /* Indicate sortable */
            position: relative;
            padding-right: 25px; /* Space for sort icon */
        }
        .dataframe-table th:hover {
            background-color: #d0d0d0;
        }
        .dataframe-table th.sorted-asc::after {
            content: ' ▲'; /* Up arrow for ascending */
            position: absolute;
            right: 8px;
            font-size: 0.8em;
        }
        .dataframe-table th.sorted-desc::after {
            content: ' ▼'; /* Down arrow for descending */
            position: absolute;
            right: 8px;
            font-size: 0.8em;
        }
        .dataframe-table tr:nth-child(even) {
            background-color: #f2f2f2;
        }

        /* Status indicator styles */
        .status-indicator {
            background-color: #e0e0e0;
            color: #3d3d3d;
            padding: 8px 12px;
            border-radius: 18px;
            margin-bottom: 10px;
            align-self: flex-start;
            margin-right: auto;
            font-style: italic;
            animation: pulse 1.5s infinite ease-in-out;
        }

        @keyframes pulse {
            0% { opacity: 0.4; }
            50% { opacity: 1; }
            100% { opacity: 0.4; }
        }