.message {
    margin: 12px 0;
    padding: 16px 24px;
    border-radius: 24px;
    max-width: 80%; /* Slightly narrower for a cleaner look */
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
    transition: all 0.4s ease;
    position: relative;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.user-message {
    background: linear-gradient(to bottom, #007bff, #0056b3);
    color: white;
    margin-left: auto;
    border-top-left-radius: 0;
    transform-origin: right;
    animation: slideInRight 0.6s ease-out;
}

.bot-message {
    background: linear-gradient(to bottom, #374151, #1f2937);
    color: #e0e0e0;
    margin-right: auto;
    border-top-right-radius: 0;
    transform-origin: left;
    animation: slideInLeft 0.6s ease-out;
}

.option-btn {
    display: inline-block;
    padding: 12px 28px;
    background: linear-gradient(to right, #007bff, #0056b3);
    color: white;
    border-radius: 24px;
    margin: 8px;
    cursor: pointer;
    transition: background 0.4s ease, transform 0.3s ease, box-shadow 0.4s ease;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    font-weight: 600;
}

.option-btn:hover {
    background: linear-gradient(to right, #0056b3, #003d7a);
    transform: scale(1.05);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}

.scrollbar-thin {
    scrollbar-width: thin;
}

.scrollbar-thumb-blue-700 {
    scrollbar-color: #3b82f6 #1f2937;
}

.scrollbar-track-gray-800 {
    scrollbar-color: #1f2937 #3b82f6;
}

body.light-mode {
    background: linear-gradient(to bottom, #f3f4f6, #ffffff);
    color: #333;
}

.light-mode .message {
    background: linear-gradient(to bottom, #e5e7eb, #d1d5db);
    color: #333;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.light-mode .bot-message {
    background: linear-gradient(to bottom, #e5e7eb, #d1d5db);
    color: #333;
}

.light-mode .option-btn {
    background: linear-gradient(to right, #007bff, #0056b3);
    color: white;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
}

.light-mode .scrollbar-thumb-blue-700 {
    scrollbar-color: #3b82f6 #e5e7eb;
}

.light-mode .scrollbar-track-gray-800 {
    scrollbar-color: #e5e7eb #3b82f6;
}

.animate-pulse-slow {
    animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

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

#validationError {
    transition: opacity 0.3s ease;
}

#validationError.show {
    opacity: 1;
    display: block;
}

footer, header {
    z-index: 50;
}

footer button, header button {
    transition: all 0.3s ease;
}

footer button:hover, header button:hover {
    transform: scale(1.05);
}

#loading {
    transition: opacity 0.3s ease;
}

#loading.show {
    opacity: 1;
    display: flex;
}

#chatbox {
    max-height: calc(100vh - 300px);
    overflow-y: auto;
}

.bot-message.typing {
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid #e0e0e0;
    animation: typewriter 3s steps(40, end) 0.5s 1 normal both, blink-cursor 0.8s step-end infinite;
}

@keyframes typewriter {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blink-cursor {
    50% { border-color: transparent; }
}

@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideInLeft {
    from { transform: translateX(-100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}



@media (max-width: 768px) {
    footer {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: #fff; /* Adjust the background color as needed */
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        z-index: 100;
        padding: 10px;
    }

    footer input[type="text"] {
        width: calc(100% - 60px); /* Adjust width to fit within the footer */
        margin: 10px;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 20px;
    }

    footer button {
        margin: 10px;
        padding: 10px 20px;
        border: none;
        border-radius: 20px;
        background: #007bff;
        color: white;
        cursor: pointer;
    }

    #chatbox {
        padding-bottom: 80px; /* Adjust padding to prevent content from being hidden behind the footer */
    }
}