#chat-circle {
    position: fixed; 
    bottom: 45px; 
    right: 40px;
    width: 60px; 
    height: 60px;
    border-radius: 50%; 
    color: white; 
    text-align: center;
    line-height: 60px; 
    cursor: pointer; 
    font-size: 24px; 
    z-index: 999;
}
#chat-box {
    position: fixed; 
    bottom: 20px; 
    right: 20px;
    width: 35%; 
    height: 90%; 
    background: linear-gradient(133deg, #e9daff, #e8f7ff);
    border-radius: 10px; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    display: flex; 
    flex-direction: column; 
    z-index: 999;
    max-height: 87vh;

    /* Animation setup */
    opacity: 0;
    transform: scale(0.5) translateY(50px);
    transform-origin: bottom right;
    visibility: hidden;

    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
#chat-box.active {
    opacity: 1;
    transform: scale(1) translateY(0);
    visibility: visible;
}
.chat-header { background: #0073aa; color: white; padding: 10px 20px; border-radius: 10px 10px 0 0; }
.chat-messages { 
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px 20px 25px;
    position: relative;
    z-index: 2; 
    height: 100vh;
}
.chat-input-area { display: flex; border-top: 1px solid #eee; }
.chat-input-area input { flex: 1; border: none; padding: 10px; outline: none; font-size: 14px; margin-left: 10px; }
.message { 
    max-width: 85%; 
    margin-top: 5px;
    font-size: 13px;
    border-radius: 8px;
    border-width: 1px;
    border-style: solid;
    clear: both;
    overflow-wrap: break-word;
    padding: 12px 16px;
    position: relative;
}
/* .user { background: #e1f5fe; align-self: flex-end; }
.bot { background: #f1f1f1; align-self: flex-start; }    */
.message.bot{
    align-self: flex-start;
    /* background: linear-gradient(135deg, rgba(14, 227, 255, 0.05), rgba(14, 227, 255, 0.15)); */
    border-top-left-radius: 0;
    border-left: 2px solid var(--primary);
    border-color: rgb(255 255 255);
    background-color: rgb(255 255 255);
    border-radius: 30px;
    box-shadow: 0 0 11px 0px #0000001a;
    isolation: isolate;
    position: relative;
    margin-left: 30px;
}
.message.bot::before {
    position: absolute;
    top: -8px;
    left: -34px;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    content: "";
    background: url("../chat-images/aiagent.png") no-repeat center;
    background-size: cover;
}
/* .message.bot::after{
    position: absolute;
    bottom: 3px;
    left: 3px;
    background: #ffffff;
    width: 8px;
    height: 8px;
    content: "";
    border-radius: 100%;
} */
.message.user {
    align-self: flex-end;
    /* background: linear-gradient(135deg, rgba(248, 69, 255, 0.15), rgba(248, 69, 255, 0.05)); */
    border-bottom-right-radius: 0;
    border-right: 2px solid var(--secondary); 
    border-color: #391a7d;
    background-color: #39177b;
    border-radius: 30px;
    color: #ffffff;
    position: relative;
}
.message.user::before{
    position: absolute;
    bottom: 3px;
    right: 3px;
    background: #391a7d;
    width: 8px;
    height: 8px;
    content: "";
    border-radius: 100%;
}
.message.user::after{
    position: absolute;
    bottom: 0px;
    right: 0px;
    background: #391a7dc9;
    width: 4px;
    height: 4px;
    content: "";
    border-radius: 100%;
}
.chat-btn, .start-chat-btn {
    display: inline-block;
    text-align: center;
    border: 1px solid var(--btn-bg);
    background: transparent;
    color: var(--btn-bg);
    -webkit-border-radius: 4px;
    border-radius: 4px;
    outline: none;
    font: 500 14px var(--secondary-font);
    height: 35px;
    line-height: 30px;
    padding: 0 8px;
    margin: 8px 6px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    flex-shrink: 0;
    letter-spacing: 0.3px;
}
.chat-btn::before, .start-chat-btn::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--gradient-color);
    z-index: -1;
    opacity: 0;
    visibility: hidden;
}
.chat-btn:hover:before, .start-chat-btn:hover:before{
    opacity: 1;
    visibility: visible;
}
.chat-btn:hover, .start-chat-btn:hover{
    color: var(--white-color);
    border-color: currentColor;
}
.chat-btn.send-btn, .start-chat-btn, .chat-btn.selected{
    border: 1px solid transparent;
    background: var(--btn-bg);
    color: var(--white-color);
}
.gradient-bg {
    background: var(--gradient-color);
    color: var(--white-color);
    font-weight: 300;
}
.chat-messages .message label{
    color: var(--body-color);
    font: 400 14px / 1.5 var(--primary-font);
}
.chat-messages .message input[type=radio]{
    margin: 2px 2px 0 0;
    width: 15px;
    height: 15px;
}

.radio-div{
    margin: 8px 0 0;
}
.radio-container {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  font-family: sans-serif;
  margin-right: 10px;
  gap: 5px;
  transition: all 0.2s ease;
}

.radio-container input[type="radio"] {
  /* Remove default browser styling */
  appearance: none;
  -webkit-appearance: none;
  
  /* Initial Shape & Size */
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 50%;
  background-color: #fff;
  
  /* Alignment */
  display: grid;
  place-content: center;
  margin: 0;
  cursor: pointer;
  transition: border 0.2s ease-in-out;
}

/* 3. The "Inner Dot" (Initial state) */
.radio-container input[type="radio"]::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  transform: scale(0); /* Hidden by default */
  transition: 120ms transform ease-in-out;
  background-color: #3c1078; /* Color of the dot */
}

/* 4. SELECTED Radio Styling */
.radio-container input[type="radio"]:checked {
  border-color: #3c1078;
}

.radio-container input[type="radio"]:checked::before {
  transform: scale(1); /* Show the dot */
}

/* 5. SELECTED Label Text Styling */
/* Styles the text inside the label when the radio is checked */
.radio-container input[type="radio"]:checked + span {
  color: #3c1078;
  font-weight: bold;
}

.radio-container:hover input[type="radio"]:not(:disabled) {
  border-color: #3c1078;
}
.confirm-div{
    display: flex;
    justify-content: flex-end;
}
.confirm-div .chat-btn, .confirm-div .start-chat-btn{
    margin: 0;
    height: 30px;
    line-height: 28px;
}
.date-div{
    margin-bottom: 10px;
}
#slots-div{
    margin-bottom: 10px;
}
input[type="date"], input[type="time"] {
    background-color: #ffffff;
    border: 1px solid #ccc;
    padding: 3px 7px;
    appearance: none;
    -webkit-appearance: none;
}
input[type="date"]::-webkit-calendar-picker-indicator {
  color: #2c3e50;
}
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-clear-button {
  display: none;
}
.close-btn{
    cursor:pointer;
    font-size: 29px;
    line-height: 37px;
}
.minimize-btn{
    float:right; 
    cursor:pointer; 
    padding-right:10px; 
    font-size: 25px; 
    line-height: 26px;
}
.fullscreen-btn{
    cursor: pointer;
    padding-right: 12px;
    font-size: 14px;
    line-height: 37px;
}
/* Styles for when the chat is "fullscreen" within the browser */
#chat-box.is-browser-fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    z-index: 9999; /* Ensures it sits above everything else */
    border-radius: 0 !important; /* Optional: makes it look more like a page */
    display: flex !important;
    flex-direction: column;
    padding: 0 10px 0 0;
}

/* Ensure the message area expands to fill the new height */
#chat-box.is-browser-fullscreen .chat-messages {
    flex: 1; 
    height: auto !important; 
}

.handle-div{
    position: relative;
}
.resize-handle-tl {
    position: absolute;
    top: -2px;
    left: -3px;
    width: 20px;
    height: 20px;
    cursor: nw-resize; /* Diagonal resize cursor */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    color: #ccc;
}

.resize-handle-tl i {
    transform: rotate(-45deg); /* Rotates grip lines to match the corner angle */
    font-size: 12px;
}

.messenger-header-wrapper {
    margin: 0px;
    border-bottom: 1px solid rgb(230, 233, 236);
    background-color: #fff;
    background-size: 100%;
    background-position: center center;
    color: #122124;
    border-radius: 10px 10px 0 0;
}
.messenger-header {
    padding: 8px 12px;
    height: 65px; 
    display: flex;
    border-radius: 10px 10px 0 0;
}
.messenger-header-title {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-flex: 1;
    flex-grow: 1;
    height: 100%;
    overflow: hidden;
}
.messenger-header-divider {
    height: 100%;
    margin-left: auto;
    display: inline-flex;
    -webkit-box-pack: end;
    justify-content: flex-end;
}
.messenger-header-action {
    display: flex;
    margin-left: 24px;
    margin-top: 0px;
    align-items: center;
}
.messenger-header-image {
    height: 32px;
    max-width: 32px;
    margin-right: 8px;
    border-radius: 32px;
}
.messenger-icon-image {
    height: auto;
    max-width: 160px;
}
.messenger-header-text {
    font-size: 14px;
    -webkit-box-flex: 1;
    flex-grow: 1;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    margin-left: 0px;
    justify-content: center;
}
.messenger-header-text-large {
    display: none;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow-wrap: normal;
    line-height: 16px;
    font-weight: 500;
}
.messenger-header-text-small {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow-wrap: normal;
    line-height: 16px;
    font-size: 15px;
}
.message-btn {
    border: none;
    outline-width: 0px;
    background-color: transparent;
    cursor: pointer;
    padding: 0px;
    letter-spacing: inherit;
}
.message-btn svg {
    color: #888f91;
}

.messenger-footer {
    display: flex;
    position: relative;
    width: 100%;
    padding: 12px;
    border-top: 1px solid #eee;
    background-color: rgb(255, 255, 255);
    border-radius: 20px; 
}
.messenger-footer .message-area {
    height: 30px;
    font-size: 13px;
    line-height: 30px;
    display: block;
    padding: 0px 32px 0px 0px;
    color: rgb(18, 33, 36);
    resize: none;
    width: 100%;
    scrollbar-width: thin;
    border: 0px;
    outline-width: 0px;
    background-color: transparent;
}
.messenger-footer .message-area:focus {
    outline: none;
}

.chat-loader {
    display: flex;
    gap: 4px; /* Space between dots */
    align-items: center;
    padding: 4px 30px;
}

.chat-loader span {
  width: 8px;
  height: 8px;
  background-color: #939598; /* Gray color similar to chat apps */
  border-radius: 50%; /* Makes dots circular */
  display: inline-block;
  animation: typing 1s infinite ease-in-out; /* Infinite loop */
}

/* Keyframes for the bounce effect */
@keyframes typing {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); opacity: 0.5; }
}

/* Staggered delay for each dot */
.chat-loader span:nth-child(2) {
  animation-delay: 0.2s;
}

.chat-loader span:nth-child(3) {
  animation-delay: 0.4s;
}

/* .chat-wrapper {
    bottom: 68px;
    right: 60px;
    position: fixed;
    display: flex;
    align-items: center;
    z-index: 999;
} */

/* Tooltip */
.chat-tooltip {
    background: #333;
    color: #fff;
    padding: 8px 12px;
    border-radius: 20px 20px 0;
    margin-right: 10px;
    font-size: 14px;
    white-space: nowrap;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    animation: fadeIn 0.5s ease;
    display: none;
}

/* Chat Button */
#chat-circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
    background-color: #fff;
    border: 7px solid #67a7e9;
    position: static;
    margin: 0;
}

/* Optional animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateX(10px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Custom Datepicker starts */

#calendar_custom {
    position: absolute;
    background: #fff;
    border: 1px solid #ccc;
    padding: 10px;
    width: 240px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.hidden {
    display: none;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    gap: 5px;
}

.calendar-header select,
.calendar-header button {
    padding: 4px;
}

.calendar-weekdays,
.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
}

.calendar-weekdays div {
    font-weight: bold;
}

.calendar-days div {
    padding: 6px;
    cursor: pointer;
}

.calendar-days div:hover {
    background: #eee;
}

.today {
    background: #007bff;
    color: #fff;
    border-radius: 50%;
}
.selected {
    background: #737374;
    color: #fff;
    border-radius: 50%;
}

.disabled {
    color: #ccc;
    pointer-events: none;
}
.date-section{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
}

/* Custom Datepicker ends */

.form-control.time-input{
    width: 145px;
    height: 35px;
}

.ai-helper {
    cursor: pointer;
    z-index: 999999;
    width: 175px;
    background-color: rgb(255, 255, 255);
    padding: 10px 9px;
    border-radius: 10px 0px 10px 10px;
    box-shadow: rgba(1, 1, 1, 0.35) 1px 4px 15px;
    display: block;
    font-size: 11px;
}
.chat-icon-text{
    cursor: pointer;
    z-index: 999999;
    width: 165px;
    background-color: rgb(255, 255, 255);
    padding: 9px 7px;
    border-radius: 10px 0px 10px 10px;
    box-shadow: rgba(1, 1, 1, 0.35) 1px 4px 15px;
    display: block;
    font-size: 12px;
    color: #000;
    top: 48px;
    position: relative;
    left: 40px;
    text-align: center;
    animation: bounce 2s infinite;
    display: none;
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
  40% {transform: translateY(-4px);}
  60% {transform: translateY(-2px);}
}

.sendbtnftrchat button{
    align-items: center;
    background: #39177b;
    text-transform: capitalize;
    color: #ffffff;
    font-size: 14px;
    display: inline-flex;
    padding: 6px 11px;
    gap: 5px;
    border-radius: 100px;
}
.sendbtnftrchat .message-btn svg{
    fill: #ffffff;
    width: 15px;
}
.messe_footernew{
    background: linear-gradient(135deg, #3c1078a1, #1a73a987);
    padding: 10px;
    border-radius: 20px;
    width: 98%;
    margin: 0 auto 5px;
}

.aitextroundboxmain{
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 99;
    width: 180px;
    height: 180px;
    border-radius: 100vmax;
    display: flex;
    align-items: center;
    justify-content: center;
}
.aitextroundotxt{
	position: absolute;
	width: 100%;
	height: 100%;
	color: #ffffff;
	font-size: 15px;
	animation: textRotation 8s linear infinite;
	text-shadow: 2px 2px #000000;
}

@keyframes textRotation {
	to {
		transform: rotate(360deg);
	}
}
.aitextroundotxt span{
	position: absolute;
	left: 50%;
	font-size: 1.2em;
	transform-origin: 0 90px;
}
.aitextroundimg{
    z-index: 1;
}

.message-wrap{
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 8px;
}
.chat-time.bot-time {
    position: relative;
    left: 30px;
    top: 0;
    color: #333;
    font-size: 12px;
}
.chat-time.user-time {
    position: relative;
    right: 0;
    top: 0;
    color: #333;
    text-align: right;
    font-size: 12px;
    display: block;
}