.chat-widget {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
}

.chatbot-icon {
    width: 60%;
    height: 60%;
}

/* Chat message container */
.chat-container {
    width: 400px;
    height: 600px;
    max-height: 90vh; /* Prevent overflow above the viewport */
    background: #f5f7f8;
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Chat message header */
.chat-header {
    background: white;
    color: rgb(17, 24, 39);
    padding: 15px;
    border-radius: 20px 20px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: "Verdana Pro",Arial,Verdana,sans-serif;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Left section chat message with logo and text */
.header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-logo {
    height: 50px; /* Adjust to match title height */
    object-fit: contain;
}

.header-text {
    display: flex;
    flex-direction: column;
    
}

.header-title {
    font-size: 20px;
    font-weight: 600;
    padding-bottom: 4px;
    line-height: 20px;
}

.header-subtitle {
    font-size: 10px;
    color: #8e8e8e; /* Subtle subtitle color */
    padding-left: 1px;
    line-height: 10px;
}

/* Close button styled as a circular icon */
.close-button {
    color: #8e8e8e;
    border: none;
    cursor: pointer;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    transition: background-color 0.3s ease;
    background-color: transparent;
}

/* Chat messages */
.chat-messages {
    flex: 1; /* Takes up all available vertical space */
    overflow-y: auto;
    padding: 15px; /* Add padding around the text bubbles */
    background-color: #f5f7f8;
    display: flex;
    flex-direction: column;
    gap: 10px; /* Space between messages */
}

.chat-message {
    min-width: 30px;
    max-width: 70%;
    padding: 10px 15px;
    border-radius: 20px;
    font-family: "Verdana Pro",Arial,Verdana,sans-serif;
    font-size: 14px;
    line-height: 1.4;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    word-wrap: break-word;
}

.chat-message.sent {
    background-color: rgb(200, 62, 53);
    color: white;
    margin-left: auto; /* Align to the right */
    border-bottom-right-radius: 0px;
}

.chat-message.received {
    background-color: white;
    color: rgb(17, 24, 39);
    margin-right: auto; /* Align to the left */
    border-bottom-left-radius: 0px;
}

/* Style for hyperlink within the received chat message */
.chat-message.received a {
    color: rgb(200, 62, 53); /* Set the hyperlink color */
    text-decoration: none;    /* Remove underline if not needed */
}

/* Reset margins for specific elements inside received messages */
.chat-message.received p,
.chat-message.received h1,
.chat-message.received h2,
.chat-message.received h3 {
    margin: 0;
}

/* Chat message input section */
.chat-input-container {
display: flex;
padding: 10px;
gap: 5px;
background-color: #f5f7f8;
}

::placeholder {
color: #A9A9AC;
opacity: 1; /* Firefox */
}

.chat-input-sub-container {
display: flex; /* Align children horizontally */
align-items: center; /* Center the textarea and button vertically */
flex: 1;
padding: 5px;
background-color: white;
border-radius: 14px;
font-family: "Verdana Pro", Arial, Verdana, sans-serif;
border: none;
gap: 10px; /* Add space between the textarea and the button */
}

#chat-input {
flex: 1; /* Allow the textarea to grow */
resize: none; /* Prevent manual resizing */
border: none; /* Remove default border */
outline: none; /* Remove focus outline */
font-family: inherit; /* Inherit font from parent */
font-size: 12px; /* Adjust font size */
padding: 8px; /* Add padding */
height: 12px;
overflow-y: scroll; /* Enable scrolling */
scrollbar-width: none; /* Hide scrollbar in Firefox */
-ms-overflow-style: none; /* Hide scrollbar in Internet Explorer */
}

/* Send button */
.send-button {
background: none;
border: none;
cursor: pointer;
}


.chat-input-container input,
.chat-input-container input:focus,
.chat-input-container input:active {
    border: none;
    outline: none; /* Ensure no outline appears on focus/selection */
    flex: 1; /* Input takes up remaining space */
    font-size: 12px; /* Adjust font size for better usability */
}

.chat-input-container button {
    background-color: transparent;
}

/* Send button styles */
.send-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center; /* Center the icon */
    justify-content: center;
    border-radius: 50%; /* Optional: Make it circular */
    transition: background-color 0.3s ease; /* Smooth hover effect */
    width: 30px; /* Make it a square */
    height: 30px; /* Same as width to ensure it's circular */
    background-color: #f5f7f8;
}

.send-button img {
    width: 24px; /* Adjust the icon size */
    height: 24px;
    object-fit: contain;
}

.hidden {
    display: none !important; /* Ensure the element is completely hidden */
}

/* pop up*/

/* Initial state: circle only */
#chat-widget.pill-widget:not(:hover) .widget-header {
    display: none;
}

/* When hovered, expand the header */
#chat-widget.pill-widget:hover {
    width: 300px; /* Adjust pill width */
}

/* Initial container (circle) */
.chat-toggle-pill {
    width: 60px;
    height: 60px;
    background: rgb(200, 62, 53);
    border-radius: 50%;
    display: flex;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: width 1s ease-out;
    overflow: hidden;
    position: relative;
}

/* Left circle with icon */
.circle {
    flex: 0 0 60px; /* Fixed width and height for the circle */
    height: 60px;
    background: rgb(200, 62, 53);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

/* Icon inside the circle */
.chatbot-icon {
    width: 60%;
    height: 60%;
    transition: transform 0.3s ease;
}

/* Right section for title and subtitle */
.header-text-pill {
    display: flex;
    flex-direction: column;
    background: white;
    padding: 0px 10px;
    height: 100%; /* Full height of the pill */
    border-top-right-radius: 25px; /* Rounded top-right corner */
    border-bottom-right-radius: 25px; /* Rounded bottom-right corner */
    justify-content: center;
}

/* Title */
.header-title-pill {
    font-size: 14px;
    color: black;
    font-family: "Verdana Pro",Arial,Verdana,sans-serif;
    padding: 0 0 3px 0
}

/* Subtitle */
.header-subtitle-pill {
    font-size: 12px;
    color: #8e8e8e;
    line-height: 1.2;
    font-family: "Verdana Pro",Arial,Verdana,sans-serif;
}

/* Expanded state for pill */
.chat-toggle-pill.expanded {
    width: 320px; /* Expanded width */
    border-radius: 30px; /* Pill-like shape */
    background-color: white;    
}

/* Show text in expanded state */
.chat-toggle-pill.expanded .header-text {
    display: flex;

}

/* Loader for response */
.loader {
    width: 30px; /* Adjust to fit in the container */
    aspect-ratio: 4;
    background: radial-gradient(circle closest-side, gray 90%, transparent) 0 / calc(100% / 3) 100% space;
    clip-path: inset(0 100% 0 0);
    animation: l1 1.5s steps(4) infinite;
    transform: scale(1)
}

@keyframes l1 {
    to {
        clip-path: inset(0 -34% 0 0);
    }
}

.chat-message.loader-message {
    display: flex;
    padding-top: 15px;
    padding-bottom: 15px;

}

/* Add this to the style section */
.feedback-buttons {
    display: flex;
    gap: 8px;
    justify-content: flex-start;
    margin-top: 4px;
    margin-left: 15px;
}

.feedback-button {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    opacity: 0.4; /* Adjusted opacity for more transparency */
    transition: opacity 0.2s, transform 0.2s;
}

/* Custom tooltip styling */
.feedback-button::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(calc(-50% + 15px));
    padding: 4px 8px;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s;
}

.feedback-button:hover::after {
    opacity: 1;
    visibility: visible;
}

.feedback-button:hover {
    opacity: 1;
    transform: scale(1.1);
}

.feedback-button.selected {
    opacity: 1; /* Full opacity when selected */
    color: rgb(200, 62, 53);
    transform: scale(1.1);
}

/* Legal links: slim fixed page footer (replaces the former avatar-menu items
   from the fork). Sits below the chatbot bubble/panel (z-index 1000); the
   right padding keeps it clear of the bubble. */
.hda-page-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 900;
    padding: 5px 96px 6px 16px;
    background-color: rgba(255, 255, 255, 0.94);
    border-top: 1px solid #e8e8e8;
    font-family: "Verdana Pro", Arial, Verdana, sans-serif;
    font-size: 11px;
    line-height: 1;
}

.hda-page-footer a {
    color: #737373;
    text-decoration: none;
    white-space: nowrap;
}

.hda-page-footer .hda-page-footer-sep {
    color: #c4c4c4;
    margin: 0 8px;
}

.hda-page-footer a:hover {
    color: rgb(200, 62, 53);
    text-decoration: underline;
}