/* =================================================================== */
/*      DEFINITIVE CSS FIX FOR CHAT LAYOUT AND LAYERING            */
/* =================================================================== */

/* This ensures the chat widget has a high stacking order and proper layout */
.tag-chat-widget {
    display: flex;
    flex-direction: column; /* This forces the header, body, and footer to stack vertically */
    z-index: 1200 !important; /* Use !important to override other styles */
    height: 600px; /* Or your desired height */
    width: 400px;  /* Or your desired width */
}

/* This specifically targets the header to ensure it's a horizontal row */
.tag-chat-widget .chat-header {
    display: flex;
    flex-direction: row; /* This is the key fix for the header layout */
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0; /* Prevents the header from shrinking */
}
.tag-chat-widget #slide-chatbox-body {
    height: 100%;
    overflow: hidden; 
    display: flex;
}

/* Container for the whole widget */
.tag-chat-widget {
    background-color: #f0f2f5;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    height: 600px;
    width: 400px;
    overflow: hidden;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Chat header */
.tag-chat-widget .chat-header {
    background-color: #007bff;
    color: white;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.1em;
    font-weight: bold;
}

/* Chat close button */
.tag-chat-widget .chat-header .close-btn {
    background: none;
    border: none;
    color: white;
    font-size: 1.5em;
    cursor: pointer;
}

/* Main container for the chat history and input footer */
.tag-chat-widget #slide-chatbox-body .chat-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    background-color: #ffffff;
}
.tag-chat-widget .chat-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    background-color: #ffffff;
}

/* ✅ FIX: This is the container for ALL messages. It gets the flex-grow and scroll properties. */
.tag-chat-widget #slide-chatbox-body .messages-container {
    flex: 1 !important; /* Grow to fill available space */
    overflow-y: auto !important; /* ONLY this area scrolls */
    padding: 1rem;
    display: flex;
    flex-direction: column;
}

.tag-chat-widget .messages-container {
    flex: 1; /* This makes it grow to fill available space */
    overflow-y: auto; /* This makes ONLY this area scrollable */
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
}

/* ✅ FIX: This container for EACH message only needs to handle alignment and margin. */
.tag-chat-widget .message-container {
    display: flex;
    margin: 5px 10px;
    max-width: 85%;
}

/* Align bot messages to the left */
.tag-chat-widget .message-container.from-bot {
    align-self: flex-start;
}

/* Align user messages to the right */
.tag-chat-widget .message-container.from-user {
    align-self: flex-end;
}

/* Style for individual chat message bubbles */
.tag-chat-widget .message-bubble {
    padding: 5px 18px;
    border-radius: 20px;
    max-width: 100%;
    word-wrap: break-word;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    position: relative;
    font-size: 0.95em;
    line-height: 1.4;
}

/* Hide the 'Bot' or 'User' label */
.tag-chat-widget .message-bubble strong {
    display: none;
}

/* Bot messages styling */
.tag-chat-widget .from-bot .message-bubble {
    background-color: #e4e6eb;
    color: #000;
    border-top-left-radius: 5px;
}

/* User messages styling */
.tag-chat-widget .from-user .message-bubble {
    background-color: #007bff;
    color: white;
    border-top-right-radius: 5px;
}

/* Timestamp styling */
.tag-chat-widget .message-bubble .small {
    font-size: 0.7em;
    opacity: 0.7;
    text-align: right;
    margin-top: 5px;
    color: inherit;
    display: block;
}

/* The fixed footer area for the input controls */
.tag-chat-widget #slide-chatbox-body .message-input-container {
    flex-shrink: 0 !important; /* Prevent this from shrinking */
    padding: 10px;
    background-color: #fff;
    border-top: 1px solid #e9e9e9;
}

.tag-chat-widget .message-input-container {
    flex-shrink: 0; /* Prevents this from shrinking */
    padding: 10px;
    background-color: #fff;
    border-top: 1px solid #e9e9e9;
}

/* Style the form to be a flex container */
.tag-chat-widget #support-chat-form {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 8px;
}

/* Attachment label and icon */
.tag-chat-widget .attach-icon-label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    color: #6c757d;
    transition: background-color 0.2s;
}
.tag-chat-widget .attach-icon-label:hover {
    background-color: #e9e9e9;
}
.tag-chat-widget #attachment-input {
    display: none;
}

/* The message input field */
.tag-chat-widget #chat-message {
    flex: 1;
    border: 1px solid #ced4da;
    border-radius: 20px;
    padding: 10px 16px;
    height: 40px;
    font-size: 16px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.tag-chat-widget #chat-message:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* The send button */
.tag-chat-widget #sendButton {
    background-color: #007bff;
    border-radius: 50%;
    outline: none;
    border: none;
    width: 40px;
    height: 40px;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}
.tag-chat-widget #sendButton:hover {
    background-color: #0056b3;
}

/* Typing indicator style */
.tag-chat-widget .typing-indicator {
    padding: 0 1rem 0.5rem;
    font-style: italic;
    color: #6c757d;
}
/*
 * ===================================================================
 * Custom Scrollbar Styling for the Chatbox
 * ===================================================================
 */

/* Target the scrollable message container for modern browsers (Chrome, Safari, Edge) */
.tag-chat-widget .messages-container::-webkit-scrollbar {
    width: 8px; /* Width of the entire scrollbar */
}

.tag-chat-widget .messages-container::-webkit-scrollbar-track {
    background: #f1f1f1; /* Color of the track (the bar the slider moves in) */
    border-radius: 10px;
}

.tag-chat-widget .messages-container::-webkit-scrollbar-thumb {
    background: #c1c1c1; /* Color of the scrollbar handle */
    border-radius: 10px;
}

.tag-chat-widget .messages-container::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8; /* Color of the handle on hover */
}

/* 
 * For Firefox, the options are simpler. This provides a basic color scheme.
 * Firefox will automatically apply this to the scrollable element.
 */
.tag-chat-widget .messages-container {
    scrollbar-width: thin; /* Can be 'auto', 'thin', or 'none' */
    scrollbar-color: #c1c1c1 #f1f1f1; /* thumb color track color */
}