.btn {

  display: flex;

  align-items: center;

  gap: 6px;

  padding: 10px 10px;

  border: none;

  border-radius: 8px;

  color: white;

  font-weight: 500;

  cursor: pointer;

  font-family: sans-serif;

  text-decoration: none;

}



.green { background-color: #28a745; }

.blue  { background-color: #007bff; }

.purple { background-color: #a855f7; }



.btn:hover {

  opacity: 0.9;

}

:root {

    --primary-color: linear-gradient(135deg, #0aa945, #057b20);

    --secondary-color: #eaeaea;

    --user-bg: #dcf8c6;

    --bot-bg: #e8f5e9;

    --agent-bg: #e8f5e9;

    --text-color: #333;

    --border-radius: 12px;

}



@keyframes pulse {

    0% {

        transform: scale(1);

        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7);

    }

    70% {

        transform: scale(1.05);

        box-shadow: 0 0 0 10px rgba(40, 167, 69, 0);

    }

    100% {

        transform: scale(1);

        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);

    }

}



#chatToggle {

    position: fixed;

    bottom: 150px;

    right: 10px;

    /*top: 10px;*/

    background: var(--primary-color);

    color: var(--secondary-color);

    border: none;

    border-radius: 50%;

    width: 50px;

    height: 50px;

    font-size: 24px;;

    cursor: pointer;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

    z-index: 9990;

    animation: pulse 2s infinite;

  

}



#chatToggle svg {

    width: 24px;

    height: 28px;

    fill: white;

}



#chatWidget {

    display: none;

    position: fixed;

    bottom: 90px;

    right: 20px;

    width: 320px;

    height: 550px;

    background: var(--secondary-color);

    border: 1px solid #ccc;

    border-radius: var(--border-radius);

    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);

    z-index: 9998;

    overflow: hidden;

    flex-direction: column;

    font-family: Arial, sans-serif;

    box-shadow: 0 0 16px rgba(0, 0, 0, 0.25);

}


#chatHeader {
    background: var(--primary-color);
    color: var(--secondary-color);
    padding: 8px 12px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
    position: relative; /* Crucial for positioning children */
    display: flex;
    align-items: center;
    justify-content: center; /* This centers the title container */
    min-height: 40px; 
}





.header-group-right {
    /* Position the close button container absolutely */
    position: absolute;
    right: 12px;
}



#chatHeader .profile-pic {

    width: 24px;

    height: 24px;

    border-radius: 50%;

    margin-right: 8px;

    vertical-align: middle;

}



#messages {

    flex: 1;

    padding: 10px;

    overflow-y: auto;

    font-size: 14px;

    display: flex;

    flex-direction: column;

    gap: 15px;

}



.msg-container {

    display: flex;

    flex-direction: column;

    max-width: 75%;

}



.msg {

    max-width: 100%;

    padding: 8px 12px;

    border-radius: 16px;

    word-wrap: break-word;

}



.user {

    align-self: flex-end;

    background: var(--primary-color);

    color: white;

    border-bottom-right-radius: 0;

    line-height: 1.5;

    font-family: 'Segoe UI', 'Roboto', sans-serif;

}



.bot,

.live_agent {

    align-self: flex-start;

    background-color: var(--bot-bg);

    color: var(--text-color);

    border-bottom-left-radius: 0;

    box-shadow: 0 1px 4px rgba(5, 123, 32, 0.35);

    line-height: 1.5;

    font-family: 'Segoe UI', 'Roboto', sans-serif;

}



.form-group input::placeholder {

    color: #adb5bd;

}



.phone-input-container {

    display: flex;

    gap: 5px;

}



#countryCodeSelect {

    flex-basis: 35%; /* Adjust width of country code selector */

}



#userPhone {

    flex-grow: 1;

}



/* Prompt Buttons (Cancel, Submit) */

.prompt-buttons {

    display: flex;

    gap: 10px;

    margin-top: 20px;

}



.modal-button {

    flex-grow: 1;
    padding: 10px;

    border-radius: 6px;

    border: none;

    font-size: 1rem;

    font-weight: 500;

    cursor: pointer;

    transition: background-color 0.2s;

}



.modal-button.secondary {

    background-color: #e9ecef;

    color: #495057;

    border: 1px solid #ced4da;

}



.modal-button.secondary:hover {

    background-color: #dee2e6;

}



.modal-button.primary {

    background-color: #343a40; /* Dark button for submit */

    color: white;

}



.modal-button.primary:hover {

    background-color: #495057;

}





#inchatFormContainer {

    background-color: white;

}



.form-step {

    display: none; /* Each step is hidden by default */

}



.inchat-form-card {

    background-color: #f8f9fa;

    border: 1px solid #e9ecef;

    border-radius: 12px;

    padding: 12px 16px;

    margin: 8px 0;

}



.inchat-form-card label {

    display: block;

    font-size: 0.9rem;

    font-weight: 50;

    color: #495057;

    margin-bottom: 8px;

}





.inchat-input-wrapper {

    display: flex;

    align-items: center;

    background-color: white;

    border: 1px solid #ced4da;

    border-radius: 8px;

    overflow: hidden;

}



/* NEW: Container for the flag to create the vertical line */

.phone-flag-container {

    display: flex;

    align-items: center;

    padding: 0 12px;

    border-right: 1px solid #e0e0e0;

}



/* NEW: Style for the flag image itself */

.phone-flag-img {

    width: 24px;

    height: auto;

    border-radius: 3px;

    object-fit: cover;

}



/* The single, editable phone input field */

#inchatUserPhone {

    border: none;

    outline: none;

    padding: 12px 10px;

    font-size: 1rem;

    font-weight: 500;

    flex-grow: 1;

    background-color: transparent;

    width: 100%;

}



#inchatUserPhone::placeholder {

    color: #adb5bd;

}

.inchat-input-wrapper input {

    border: none;

    outline: none;

    padding: 10px;

    font-size: 1rem;
    flex-grow: 1;

    background-color: transparent;

    width: 100%; /* Ensure input takes available space */

}



.inchat-input-wrapper input::placeholder {

    color: #adb5bd;

}



.phone-emoji-span {

    padding-left: 12px;

    font-size: 1.2rem;

    padding-right: 8px;

}



.inchat-submit-button {

    background-color: #28a745; /* Green background */

    color: white;

    border: none;

    cursor: pointer;

    padding: 8px;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: background-color 0.2s;

}



.inchat-submit-button:hover {

    background-color: #218838;

}



.inchat-submit-button svg {

    width: 24px;

    height: 24px;

}



.confirmation-card {

    background-color: #f0f2f5; /* Light grey background for the bubble */

    border: 1px solid #e0e0e0;

    border-radius: 12px;

    padding: 12px;

    align-self: flex-start;

}



/* Each white box inside the confirmation card */

.confirmation-card .detail-item {

    display: flex;

    align-items: center;

    background-color: white;

    border: 1px solid #d4d4d4;

    border-radius: 8px;

    padding: 10px 12px;

    font-size: 14px;

    color: #333;

}



/* Add space between the Name and Phone boxes */

.confirmation-card .detail-item:not(:last-child) {

    margin-bottom: 8px;

}



.confirmation-card .detail-label {

    font-weight: bold;

    margin-right: 8px;

    color: #333;

}



.confirmation-card .detail-value {

    color: #555;

}



.confirmation-card .detail-flag {

    width: 24px;

    height: auto;

    border-radius: 3px;

    margin-right: 8px;

}



.msg-footer {

    margin-top: 4px;

    padding-left: 5px;

    font-size: 12px;

    color: #666;

    font-family: 'Segoe UI', 'Roboto', sans-serif;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.footer-left {

    display: flex;

    align-items: center;

}



.timestamp {

    margin-left: 5px;

}



.bot a,

.live_agent a {

    color: #007bff;

    text-decoration: underline;

}



#chatForm {
    display: flex;
    align-items: center;
    /* --- MODIFIED --- */
    /* Default state: A subtle, thin grey border */
    border: 1px solid rgb(33, 136, 56); 
    border-radius: var(--border-radius);
    padding: 8px 12px;
    background-color: var(--secondary-color);
    margin: 0px 10px 0px 10px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, border-width 0.3s ease;
}



#liveAgentModal .modal-content {

    text-align: left;

}



.form-group {

    margin-bottom: 15px;

}



.form-group label {

    display: block;

    margin-bottom: 8px;

    font-size: 14px;

    font-weight: 500;

    color: #333;

    font-family: 'Segoe UI', sans-serif;

}



/* Container for the phone input */

.phone-input-container {

    display: flex;

    align-items: center;

    border: 1px solid #ccc;

    border-radius: 8px;

    background-color: white;

    overflow: hidden; /* Ensures the button fits perfectly */

    transition: border-color 0.3s ease, box-shadow 0.3s ease;

}



.phone-input-container:focus-within {

    border-color: #05c46b;

    box-shadow: 0 0 10px rgba(5, 196, 107, 0.9);

}



.phone-input-container span {

    margin: 0 8px;

    color: #333;

    font-size: 16px;

}



.phone-input-container input[type="tel"] {

    border: none;

    outline: none;

    flex-grow: 1;

    font-size: 16px;

    padding: 12px 0;

    font-family: 'Segoe UI', 'Roboto', sans-serif;

}



/* Green submit button with arrow */

.phone-submit-btn {

    background-color: #28a745;

    border: none;

    color: white;

    padding: 0 12px;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    align-self: stretch; /* Makes the button height of the container */

    transition: background-color 0.2s ease;

}



.phone-submit-btn:hover {

    background-color: #218838;

}



.phone-submit-btn svg {

   width: 20px;

   height: 20px;

}



/* General styling for the name input */

#liveAgentForm input[type="text"] {

    width: 100%;

    padding: 12px;

    border: 1px solid #ccc;

    border-radius: 8px;

    box-sizing: border-box;

    font-size: 16px;

    transition: border-color 0.3s ease, box-shadow 0.3s ease;

}



#liveAgentForm input[type="text"]:focus {

    outline: none;

    border-color: #05c46b;

    box-shadow: 0 0 10px rgba(5, 196, 107, 0.9);

}



#chatForm:focus-within {

  border-color: #05c46b;

  box-shadow: 0 0 10px rgba(5, 196, 107, 0.9); 

}



#chatForm .input-container {

    display: flex;

    align-items: center;

    flex: 1;

}





#chatForm textarea {

    flex: 1;

    font-family: 'Segoe UI', 'Roboto', sans-serif;

    border: none;

    padding: 6px;

    font-size: 16px;

    line-height: 1.2;

    outline: none;

    background-color: transparent;

    resize: none;

    max-height: 100px;

    overflow-y: auto;

    scrollbar-width: none;

    -ms-overflow-style: none;

}



/* For WebKit browsers like Chrome, Safari, and Opera */

#chatForm textarea::-webkit-scrollbar {

    display: none;

}



#chatForm button {

    background: var(--primary-color);

    color: var(--secondary-color);

    border: none;

    width: 40px;

    height: 40px;

    border-radius: 50%;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: background-color 0.3s ease, transform 0.2s ease;

}



#chatForm button:disabled {

    background-color: #aaa;

    cursor: not-allowed;

}



#chatForm button:hover:enabled {

    background-color: #218838;

    transform: scale(1.05);

}



#chatForm button:active {

    transform: scale(0.98);

}



.typing-dots {

    display: inline-block;

}



.typing-dots span {

    display: inline-block;

    animation: blink 1.2s infinite;

    font-weight: bold;

    font-size: 20px;

}



.typing-dots span:nth-child(2) {

    animation-delay: 0.2s;

}



.typing-dots span:nth-child(3) {

    animation-delay: 0.4s;

}



@keyframes blink {

    0%,

    100% {

        opacity: 0.2;

    }

    50% {

        opacity: 1;

    }

}



#startNewChatButton {

    width: auto;

    background: var(--primary-color);

    color: var(--secondary-color);

    border: none;

    padding: 12px 25px;

    cursor: pointer;

    border-radius: 25px;

    font-size: 14px;

    font-weight: bold;

    transition: background-color 0.3s ease;

    margin: 20px auto;

    flex-grow: 0;

}



#startNewChatButton:hover {

    background-color: #218838;

}



#minimizeButton,

#restartChatButton {

    background: none;

    border: none;

    cursor: pointer;

    padding: 4px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--secondary-color);

    transition: background-color 0.2s ease, opacity 0.3s ease;

    width: 32px;

    height: 32px;

}



#minimizeButton:disabled,

#restartChatButton:disabled {

    opacity: 0.5;

    cursor: not-allowed;

}



#minimizeButton svg,

#restartChatButton svg {

    width: 20px;

    height: 20px;

}



#confirmModal {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.6);

    z-index: 10000;

    display: flex;

    align-items: center;

    justify-content: center;

}



#confirmModal .modal-content {

    background: white;

    padding: 20px 25px;

    border-radius: var(--border-radius);

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);

    text-align: center;

    width: 90%;

    max-width: 300px;

}



#confirmModal .modal-content p {

    margin: 0 0 20px 0;

    font-size: 14px;

    color: var(--text-color);

    font-family: 'Segoe UI', sans-serif;

}



#confirmModal .modal-buttons {

    display: flex;

    justify-content: space-between;

    gap: 10px;

    font-family: 'Segoe UI', sans-serif;

}



#confirmModal .modal-button {

    flex-grow: 1;

    border: none;

    padding: 10px;

    border-radius: 8px;

    font-size: 14px;

    font-weight: bold;

    cursor: pointer;

    transition: opacity 0.2s;

}



#confirmModal .modal-button:hover {

    opacity: 0.85;

}



#confirmModal .modal-button.primary {

    background: var(--primary-color);

    color: var(--secondary-color);

}



#confirmModal .modal-button.secondary {

    background-color: #e0e0e0;

    color: #333;

}



@media (max-width: 760px) {

    #chatWidget {

        width: 100%;

        height: 100%;

        max-height: 100%;

        top: 0;

        right: 0;

        bottom: 0;

        left: 0;

        border-radius: 0;

        border: none;

    }

    #chatHeader {

        border-top-left-radius: 0;

        border-top-right-radius: 0;

    }

    #chatToggle {

        bottom: 15px;

        right: 10px;

        /*top: 10px;*/

    }

}





.chat-button svg {
    width: 15px;
    height: 15px;
    stroke-width: 2.5; /* Makes the lines slightly thicker and more visible */
}



.chat-buttons-wrapper {

    display: flex;

    justify-content: space-between;

    padding: 5px;

}



#headerTitleContainer {
    display: flex;
    flex-direction: column;
    text-align: center;      /* MODIFIED: This now centers the text */
    line-height: 1.25;
}

/* The main title: "Albot" */
.main-title {
    font-size: 21px;         /* Make it slightly bigger */
    font-weight: 600;        /* Make it bolder (semi-bold) */
    color: #ffffff;
}

/* The sub-title: "Your AI Assistant" */
.sub-title {
    font-size: 14px;         /* Make it smaller */
    font-weight: 400;        /* Normal font weight */
    color: #ffffff;
    opacity: 0.85;           /* Make it slightly transparent for a subtle look */
}



.button-group {

    display: flex;

    justify-content: space-around;

    background-color: #ffffff; /* Sets the bar background to white */

    padding: 10px 0;



}



.chat-button {
    background-color: #f3f4f6;
    color: #4a5568;
    border: none;
    
    font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 500;
    font-size: 13px;

    /* --- MODIFICATIONS FOR COMPACT SIZE --- */
    border-radius: 16px;       /* MODIFIED: Slightly less rounded for a tighter feel */
    padding: 6px 12px;         /* MODIFIED: Reduced vertical and horizontal padding */
    gap: 5px;                  /* MODIFIED: Tighter gap between icon and text */

    display: inline-flex;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}



/* Style for the chat buttons when they are disabled */

.chat-button:disabled {

    background-color: #f0f0f0;  /* A muted, grayish background */

    color: #b0b0b0;              /* Faded text and icon color */

    box-shadow: none;             /* Remove the shadow to make it look flat */

    cursor: not-allowed;          /* Show the standard 'not-allowed' cursor on hover */

    opacity: 0.8;                 /* Slightly fade out the button */

}



/* This ensures the hover effect is also removed when the button is disabled */

.chat-button:disabled,
.chat-button:disabled:hover {
    background-color: #f0f0f0;
    color: #b0b0b0;
    border-color: #e0e0e0;
    box-shadow: none;
    cursor: not-allowed;
}



.chat-button:hover {
    background-color: #059669;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(10, 169, 69, 0.25);
}


.chat-button i {

    margin-right: 6px; /* Adds space between the icon and the text */

}



.inchat-error-msg {

    color: #d9534f; /* A standard error red color */

    font-size: 13px;

    font-weight: 500;

    margin-top: 6px;

    margin-left: 4px;

    display: none; /* Important: hidden by default */

}



.header-group-left {
    position: absolute; /* Lock to the side */
    left: 12px;         /* Position it based on the parent's padding */
    display: flex;
    align-items: center;
}







#headerIconContainer {
    /* --- The CORRECT setting for a pure, solid white background --- */
    background-color: #ffffff; 
    
    border-radius: 50%;
    width: 25px;
    height: 25px;
    
    /* These properties center your logo image inside the white circle */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}






#headerIconContainer img {

  width: 48px;   /* Adjusted icon size to fit the new container */

  height: 48px;  /* Adjusted icon size to fit the new container */


}

input,
select,
textarea {
  font-size: 16px;
}

html {
  -webkit-text-size-adjust: 100%;
}

/* Notice shown above the chat input bar (beta warning) */
.chat-beta-notice {
    font-size: 12px;
    color: #666;
    padding: 6px 12px;
    margin: 0px 10px 0 10px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.2;
    font-style: italic;
}
@media (max-width: 760px) {
    .chat-beta-notice { font-size: 13px; margin: 3px; }
}

/* Chat Popup Message */
.chat-popup {
    position: fixed;
    bottom: 220px;
    right: 20px;
    display: none;
    z-index: 9989;
    animation: popupSlideIn 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.popup-content {
    background: var(--primary-color);
    border: none;
    border-radius: 16px;
    padding: 16px 20px;
    box-shadow: 0 12px 40px rgba(10, 169, 69, 0.25);
    width: 240px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    text-align: left;
    position: relative;
}

.popup-content::after {
    content: '';
    position: absolute;
    bottom: -8px;
    right: 30px;
    width: 16px;
    height: 16px;
    background: linear-gradient(135deg, #0aa945, #057b20);
    border: none;
    transform: rotate(45deg);
    box-shadow: none;
    z-index: -1;
}

.popup-content p {
    margin: 0;
    color: white;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.4;
}

#closePopupBtn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    position: absolute;
    top: 8px;
    right: 10px;
    padding: 4px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

#closePopupBtn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

@keyframes popupSlideIn {
    from {
        opacity: 0;
        transform: translateY(15px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 760px) {
    .chat-popup {
        bottom: 170px;
        right: 15px;
        width: 240px;
    }
    
    .popup-content::after {
        right: 25px;
    }
}

/* Feedback icons for bot messages */
.feedback-icons {
    display: flex;
    gap: 8px;
}

.thumb-btn {
    background: none;
    border: none;
    color: rgba(0, 0, 0, 0.4); /* Make them visible but subtle */
    cursor: pointer;
    padding: 2px;
    transition: color 0.2s ease;
}

.thumb-btn:hover {
    color: rgba(0, 0, 0, 0.7);
}

.thumb-btn svg {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

#suggestionChipsWrapper {
    /* This negative margin counteracts the 15px gap from the #messages container */
    margin-top: -5px; 
}

.suggestion-chips-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    /* Reduced the top padding for a tighter fit */
    padding-top: 5px; 
}

/* The .suggestion-chip style can remain as it is */
.suggestion-chip {
    background-color: #ffffff;
    color: #059669;
    border: 1px solid #059669;
    border-radius: 16px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    font-family: 'Segoe UI', sans-serif;
    transition: background-color 0.2s, color 0.2s;
}

.suggestion-chip:hover {
    background-color: #e8f5e9;
    color: #057b20;
}

.call-permission-container {
    display: flex;
    flex-direction: column;
    width: 95%; /* Make it take up most of the chat width */
    max-width: none; /* Override the default max-width for messages */
}

/* This is the main highlighted message bubble */
.call-permission-prompt {
    background-color: #e6f7ff;
    color: #004085;
    border-left: 4px solid #28a745;
    border-radius: 12px; /* Standard border radius */
    padding: 12px 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* The question text inside the bubble */
.call-permission-prompt .prompt-question {
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 12px 0;
    line-height: 1.4;
    text-align: center; /* Center the question text */
}

/* The container for the Yes/No buttons */
.call-permission-prompt .prompt-buttons {
    display: flex;
    gap: 10px;
}

/* The individual buttons inside the bubble */
.call-permission-prompt .prompt-button {
    flex-grow: 1; /* This is KEY: makes both buttons expand to fill the space */
    border: none;
    border-radius: 8px;
    padding: 10px; /* Slightly more padding for a better feel */
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.call-permission-prompt .prompt-button.primary {
    background-color: #28a745;
    color: white;
}
.call-permission-prompt .prompt-button.primary:hover {
    background-color: #218838;
}

.call-permission-prompt .prompt-button.secondary {
    background-color: #e9ecef;
    color: #495057;
}
.call-permission-prompt .prompt-button.secondary:hover {
    background-color: #dee2e6;
}

/* Add a disabled style for the 'Call' link */
.chat-button.disabled {
    background-color: #f0f0f0 !important;
    color: #b0b0b0 !important;
    border-color: #e0e0e0 !important;
    cursor: not-allowed;
    pointer-events: none; /* Disables clicks on the 'a' tag */
}



#liveAgentHeader {
    background: var(--primary-color); /* Matches your brand's green */
    color: white;
    padding: 10px 12px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* This makes it a direct replacement for the default header */
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
}

.live-agent-icon-container {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.live-agent-icon-container svg {
    width: 20px;
    height: 20px;
    stroke: white;
}

#liveAgentHeaderText {
    font-size: 16px;
    font-weight: bold;
}

.msg.bot.msg-highlight {
    background-color: #e6f7ff; /* A slightly brighter, cleaner blue */
    color: #004085;           /* Dark blue text for strong contrast */
    border-left: 4px solid #28a745; /* KEY CHANGE: Adds a green accent bar */
    border-top-color: #bce8f1;
    border-right-color: #bce8f1;
    border-bottom-color: #bce8f1;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}