body {
    background: #EEEEEE;
    font-family: 'Roboto', sans-serif;
}

.card {
    width: 450px !important; /* Narrowed width for desktop */
    border: none !important;
    border-radius: 15px !important;
    height: 500px !important; /* Fixed height */
    display: flex !important; /* Use flexbox for layout */
    flex-direction: column !important; /* Column layout for children */
}

.card-chat {
    position: fixed !important;
    bottom: 70px !important;
    right: 17px !important; 
    width:400px !important; 
    height: auto !important;
    z-index: 9999 !important; 
    height: 520px !important;
    transition: all 0.3s ease !important; /* Add transition for smooth resizing */
    color: #888 !important;
    
    animation: slideIn 0.5s ease-out; /* Add animation for when it opens */
}

@keyframes slideIn {
    0% {
        opacity: 0; /* Start completely transparent */
        transform: translateY(20px); /* Start slightly below */
    }
    100% {
        opacity: 1; /* Fully visible */
        transform: translateY(0); /* Back to original position */
    }
}

.scroll-container {
    height: calc(100% - 50px);  
    overflow-y: auto; 
    width: 100%;
}

.form-control:focus::placeholder {
    color: #888 !important; /* Ensure the placeholder color remains the same on focus */
    opacity: 1 !important; /* Keep opacity at full when focused */
}

.form-control {
    border-radius: 10px !important; /* Adjust the value for more or less rounding */
    border: 1px solid #ccc !important; /* Add border if needed */
    padding: 10px; /* Adjust padding for better spacing inside the control */
    transition: all 0.3s ease !important; /* Smooth transition for focus effects */
}


/* Custom scrollbar styles for WebKit browsers (Chrome, Safari) */
.scroll-container::-webkit-scrollbar {
    width: 10px; /* Width of the scrollbar */
}

.scroll-container::-webkit-scrollbar-track {
    background: #ffffff; /* Track background color */
    border-radius: 10px; /* Rounded corners for the track */
}

.scroll-container::-webkit-scrollbar-thumb {
    background: #e8e6e6; /* Thumb color */
    border-radius: 10px; /* Rounded corners for the thumb */
}

/* Optional: Hover effect for the scrollbar thumb */
.scroll-container::-webkit-scrollbar-thumb:hover {
    background: #b6b5b5; /* Darker shade on hover */
}

/* Custom scrollbar styles for Firefox */
.scroll-container {
    height: calc(100% - 50px);  
    overflow-y: auto; 
    width: 100%;
}

.adiv {
    background: #D82323;
    border-radius: 15px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    font-size: 16px; /* Larger font size */
    height: 60px; /* Increased height */
    display: flex; /* Use flex to center content */
    align-items: center; /* Center vertically */
    justify-content: space-between; /* Center horizontally */
    color: #FFFFFF; /* Text color for better visibility */
    padding: 0 15px; /* Padding for spacing */
}

/* .chat {
    border: none;
    background: #FFFFFF;
    font-size: 15px;
    border-radius: 20px;
    padding: 12px; 
    flex: 1; 
    overflow-y: auto; 
    max-height: calc(100% - 60px); 
} */

.chat {
    display: flex;
    flex-direction: column; /* Stack messages vertically */
    align-items: flex-end; /* Align bubbles to the right */
}

.message-time {
    font-size: 0.8em; /* Smaller font size for the time */
    color: #ccc; /* Light grey color for the timestamp */
    margin-left: 10px; /* Space between message and time */
}

.chat-date {
    font-weight: bold;
    margin: 10px 0;
    text-align: center; /* Center align the date header */
    color: #333; /* Darker color for the date */
    font-size: 16px; /* Adjust font size as needed */
    padding: 10px 0; /* Add more padding for better appearance */
    border-radius: 5px; /* Rounded corners */
    width: 100%; /* Ensure the date header takes full width */
    display: block; /* Ensures it behaves like a block element */
    position: relative; /* Set position relative for pseudo-elements */
}

/* Garis di kiri dan kanan */
.chat-date::before,
.chat-date::after {
    content: ""; /* Pseudo-elements membutuhkan konten */
    position: absolute; /* Posisi absolut untuk mengatur posisi garis */
    top: 50%; /* Tengah vertikal */
    width: 40%; /* Lebar garis */
    height: 0.5px; /* Tinggi garis, lebih tipis */
    background-color: rgba(128, 128, 128, 0.5); /* Warna abu-abu tipis */
    transform: translateY(-50%); /* Pusatkan garis secara vertikal */
}

/* Efek menghilang ke ujungnya */
.chat-date::before {
    left: 0; /* Garis di sebelah kiri */
    border-radius: 0 5px 5px 0; /* Bulatkan ujung kanan */
}

.chat-date::after {
    right: 0; /* Garis di sebelah kanan */
    border-radius: 5px 0 0 5px; /* Bulatkan ujung kiri */
}

/* Efek garis menghilang */
.chat-date {
    opacity: 1; /* Awalnya tampak */
    transition: opacity 0.5s ease; /* Transisi untuk efek hilang */
}

.chat-date.hidden {
    opacity: 0; /* Garis menghilang */
}

.bot-message {
    font-size: 14px; /* Smaller font size for mobile */
    padding: 10px 15px; /* Adjust padding for mobile */
    margin-bottom: 8px; /* Reduce bottom margin for compact look */
    max-width: 85%; /* Slightly wider max width */
    line-height: 1.4; /* Line height for better readability */
    border-radius: 10px; /* Slightly less rounded on mobile */
    background-color: #f4f3f3; /* Ensure background color consistency */
    float: left; /* Keep left alignment */
    clear: both; /* Prevent overlap */
}

.bot-message::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: -7px;
    width: 0;
    height: 0;
    border: 7px solid transparent; /* Adjust for smaller arrow */
    border-right-color: #f4f3f3; /* Match background color */
    border-left: 0;
    border-bottom: 0;
    margin-top: -3px; /* Adjust position for arrow */
}


/* User message style */
.chat p {
    margin: 0;
    padding: 8px 12px; /* Horizontal padding for better appearance */
    background-color: #D82323; /* Red color for user messages */
    color: #FFFFFF; /* White text */
    border-radius: 12px;
    margin-bottom: 10px;
    max-width: 80%; /* Allow some width for messages */
    text-align: right; /* Align text to the right inside the bubble */
    display: inline-block; /* Bubble adjusts to text width */
    overflow-wrap: break-word; /* Allow long words to wrap */
    word-wrap: break-word; /* Allow long words to wrap */
    white-space: normal; /* Allow text to wrap */
    float: right; /* Align user messages to the right */
}

/* Bot response style */
.chat p.replybot {
    margin: 0;
    padding: 8px 12px; /* Padding for bot response */
    background-color: #f4f3f3; /* Light gray color for bot replies */
    color: #000000; /* Black text */
    border-radius: 12px; /* Rounded corners for bot replies */
    margin-bottom: 10px; /* Spacing between messages */
    max-width: 80%; /* Max width for bot messages */
    text-align: left; /* Align text to the left for bot replies */
    display: inline-block; /* Bubble adjusts to text width */
    overflow-wrap: break-word; /* Allow long words to wrap */
    word-wrap: break-word; /* Allow long words to wrap */
    white-space: normal; /* Allow text to wrap */
    float: left; /* Align bot replies to the left */
    align-self: flex-start; /* Position bot messages to the left */
}

/* .replybot::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: -8px;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-right-color: #f4f3f3; 
    border-left: 0;
    border-bottom: 0;
    margin-top: -4px; 
} */


.bg-white {
    border: 1px solid #E7E7E9;
    font-size: 15px; /* Larger font size */
    border-radius: 20px;
    padding: 12px; /* More padding */
}

.form-group {
    padding: 10px; /* Padding for the form group */
    display: flex; /* Flexbox for layout */
    margin-top: auto; /* Push to bottom of card */
}

.form-control {
    border-radius: 12px;
    border: 1px solid #F0F0F0;
    font-size: 14px; /* Larger font size */
    transition: all 0.2s ease;
    width: 100%; /* Full width */
    height: 60px; /* Height of the input */
    padding: 10px; /* Padding inside the input */
}

.form-control:focus {
    box-shadow: none; /* Remove box-shadow on focus */
}

.form-control::placeholder {
    font-size: 14px; /* Placeholder font size */
    color: #C4C4C4; /* Placeholder color */
}

#messageInput {
    resize: none; /* Prevent resizing */
    width: 100%; /* Full width */
    height: 60px; /* Height for visibility */
}

.chat-widget {
    position: fixed;
    bottom: 70px; /* Positioning above the toggle button */
    right: 20px;
    display: none; /* Initially hidden */
    z-index: 1000; /* On top of other elements */
    transition: all 0.3s ease;
    width: 450px; /* Width of the chat widget */
    margin-right: 20px;
    margin-bottom: 20px;
}

.toggle-icon {
    position: fixed;
    bottom: 20px; /* Position toggle button */
    right: 20px;
    font-size: 36px; /* Increased size */
    cursor: pointer;
    color: #D82323; /* Icon color */
    z-index: 1000; /* On top of other elements */
}

#userInfoCard {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin: 0 auto; /* Memusatkan card di dalam container */
    max-width: 250px; /* Ukuran maksimum kartu */
}

/* #chatWidget {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 400px; 
    max-width: 90%; 
    height: 500px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    transition: all 0.3s ease;
    z-index: 1000;
    display: none;
} */

/* Responsive Design for mobile devices */
@media (max-width: 768px) {
    
    .chat-widget {
        width: 100%; /* Full width on mobile */
        height: 100%; /* Full height on mobile */
        right: 0; /* Align to the left */
        bottom: 0; /* Align to the bottom */
        margin: 0; /* Remove margins */
        border-radius: 0; /* Remove border radius for full screen */
    }

    .card-chat {
        width: 100% !important;  /* Full width on mobile */
        height: calc(100% - 70px) !important; /* Full height minus the bottom space */
        right: 0 !important; /* Align to the left */
        left: 0 !important; /* Align to the right */
        bottom: 0 !important; /* Align to the bottom */
    }

    .toggle-icon {
        font-size: 35px; /* Resize toggle icon */
        cursor: pointer; /* Pointer cursor for close icon */
    }

    /* Hide toggle icon when chat widget is open */
    .card-chat.active ~ .toggle-icon {
        display: none !important; /* Hide the toggle icon */
    }

    .scroll-container {
        flex-grow: 1; /* Allow scrolling area to take up available space */
        overflow-y: auto; /* Allow scrolling within the container */
        padding-bottom: 60px; /* Padding for bottom to avoid input area overlap */
    }

    .form-group {
        padding: 10px; /* Padding for form group */
        margin-bottom: 10px; /* Add margin to prevent cutoff */
    }

    .form-control,
    .form-control::placeholder {
        font-size: 12px; /* Smaller font for mobile */
    }

    .message-input {
        padding: 10px 15px; /* Padding for input area */
        border-top: 1px solid #ddd; /* Border to separate input from messages */
        background-color: #f9f9f9; /* Light background for input area */
        width: 100%; /* Full width to cover the entire chat card */
        box-sizing: border-box; /* Ensure padding and border are included in total width */
        border-radius: 0 0 12px 12px; /* Rounded corners for the bottom */
        position: relative; /* Ensure proper positioning */
        z-index: 1; /* Keep it above other elements */
    }    

    .bot-message {
        font-size: 14px; /* Smaller font size for mobile */
        padding: 10px 15px; /* Adjust padding for mobile */
        margin-bottom: 8px; /* Reduce bottom margin for compact look */
        max-width: 85%; /* Slightly wider max width */
        line-height: 1.4; /* Line height for better readability */
        border-radius: 10px; /* Slightly less rounded on mobile */
        background-color: #f4f3f3; /* Ensure background color consistency */
        float: left; /* Keep left alignment */
        clear: both; /* Prevent overlap */
    }

    .bot-message::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: -7px;
        width: 0;
        height: 0;
        border: 7px solid transparent; /* Adjust for smaller arrow */
        border-right-color: #f4f3f3; /* Match background color */
        border-left: 0;
        border-bottom: 0;
        margin-top: -3px; /* Adjust position for arrow */
    }
}