.bg-dark-blue{background:#0057B8}
.container-fluid {
    background-color: #0c1324; /* Dark blue background */
    color: white; 
}

/* Left Panel (Avatar & Profile) */
.left-panel {
    background-color: transparent;
    text-align: center;
    padding: 20px;
}

.avatar-img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 2px solid white;
}

/* 💬 Chat Panel */
.chat-panel {
    display: flex;
    flex-direction: column;
    background: #fff;

}

/* Chat Container */
#chat-container {
    width: 100%!important;
    max-width: 600px;
    background: #1a1a2e;
    border-radius: 15px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Beautified Scroll Bar */
#chat-box {
	color: #000;
    overflow-y: auto; /* ✅ Enables scrolling */
    scroll-behavior: smooth; /* ✅ Adds smooth scrolling */
    
    /* ✅ Custom Scroll Bar Styles */
    scrollbar-width: thin; /* For Firefox */
    scrollbar-color: #0047AB #1a1c3b; /* Scroll thumb and track */
}

/* ✅ Custom Scroll Bar for WebKit Browsers (Chrome, Edge, Safari) */
#chat-box::-webkit-scrollbar {
    width: 8px; /* Thin scroll bar */
}

#chat-box::-webkit-scrollbar-track {
    background: #1a1c3b; /* Dark background for scroll track */
    border-radius: 10px;
}

#chat-box::-webkit-scrollbar-thumb {
    background: #0078ff; /* Blue color for the scroll thumb */
    border-radius: 10px;
}

#chat-box::-webkit-scrollbar-thumb:hover {
    background: #005bb5; /* Darker shade on hover */
}



/* Bot & User Messages */
.message {
    
    align-items: flex-start;
    max-width: 80%;
    padding: 12px 15px;
    border-radius: 15px;
    margin-bottom: 10px; /* ✅ Space between messages */
    font-size: 14px;
    word-wrap: break-word;
}

.bot {
    display: flex;
    align-items: flex-start;
    color: black;
    padding: 10px 15px;
    border-radius: 0px 25px 25px 25px;
    max-width: 80%;  /* Adjusted for better responsiveness */
    width: fit-content; /* Ensures the chat bubble only takes the required space */
    font-size: 14px;
    word-wrap: break-word;
    word-break: break-word;
    position: relative;
}

.bot-avtar-image {
	display:none;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    margin-right: 10px;
    flex-shrink: 0; /* Prevents the image from resizing */
}

.bot-text {
    background:linear-gradient(0deg, #e5e5e5, #f8f8f8), rgb(237 237 237 / 90%);
    padding: 10px 35px 10px 14px;
    border-radius: 25px 25px 25px 0px;
    max-width: 100%;
    flex: 1; /* Ensures the text properly wraps */
    overflow-wrap: break-word; /* Ensures long words break properly */
}




/* Make the bot avatar appear on the left side */
 
/* Add a speech bubble tail effect */
.bot::after {
    content: "";
    position: absolute;
    top: 50%;
    left: -10px;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid #f5f5f5; /* Match the bubble color */
    transform: translateY(-50%);
}

/* User Messages */
.user {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end; /* Align to the right */
    color: black;
    padding: 10px 15px;
    border-radius: 25px 0px 25px 25px; /* Right-aligned chat bubble */
    max-width: 80%;  /* Adjusted for better responsiveness */
    width: fit-content; /* Ensures the chat bubble only takes the required space */
    font-size: 14px;
    word-wrap: break-word;
    word-break: break-word;
    position: relative;
    margin-left: auto; /* Pushes the message to the right */
}

.user-avatar-image {
	display:none;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    margin-left: 10px; /* Moves the avatar to the right of the message */
    flex-shrink: 0; /* Prevents the image from resizing */
}

.user-text {
    background-color: #0047AB; /* Differentiate user messages with a blue background */
    color: #fff; /* White text for contrast */
    padding: 10px;
    border-radius: 25px 25px 0px 25px; /* Rounded edges for chat bubble */
    max-width: 100%;
    flex: 1; /* Ensures the text properly wraps */
    overflow-wrap: break-word; /* Ensures long words break properly */
}

/* User Message Bubble */

/* User Avatar */
.user img {
    width: 40px;
   
    border-radius: 50%;
    margin-left: 10px;
}
.bot {
    align-self: flex-start;
    justify-content: flex-start;
}

/* ✅ Ensure User Messages Are on the Right */
.user {
    align-self: flex-end;
    justify-content: flex-end;
}

/* Message Avatar (For Bot) */
.bot-message {
    display: flex;
    align-items: center;
}


/* Input Box */
.category-btn {
    background-color: #ffeb3b; /* Yellow background */
        border: 1px solid #c8b900; /* Slightly darker yellow border */
        color: black;
        padding: 5px 10px;
        font-size: 14px;
        font-weight: bold;
        cursor: pointer;
        border-radius: 5px;
        margin: 5px;
        display: inline-block;
}

.category-btn:hover {
   background-color: #ffd700;
}
.custome-close-btn{
	margin: 0rem 0rem 0rem auto !important;
    padding: 0.4375rem 0.625rem !important;
   border: 25px; 
    background: #fff !important;
    color: #000 !important;
    min-width: -moz-min-content;
    font-size: 24px;
   /*  border: 2px solid #000 !important;
    border-radius: 28px; */
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 6.72px .96px rgba(0, 0, 0, .149);
}
#input-container {
    display: flex;
    align-items: center;
    padding: 8px;
    border-radius: 10px;
    width: 100%;
    justify-content: space-between;
}
.form-input {
            border: none;
            border-radius: 30px;
            padding: 10px 15px;
            font-size: 16px;
            width: 100%;
            outline: none;
            box-shadow: none;
        }

        .input-group-append button {
            background: #0057B8;
            border: none;
            color: white;
            border-radius: 50%;
            width: 45px;
            height: 45px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background 0.3s;
        }

        .input-group-append button:hover {
            background: #0056b3;
        }

        .input-group-append button i {
            font-size: 18px;
        }
#mute-btn {
    background: transparent;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
	border:2px solid #0057B8;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-chatbot .input-group .form-input {
    padding: 12px;
    font-size: 14px!important;
    border: none;
    border-radius: 8px;
    outline: none;
    background: #f5f5f5;
}
.ai-avatar-heading {
    background-color: #FFD700; /* Yellow background */
    padding: 8px 15px;
    border-radius: 15px;
    font-weight: bold;
    color: black;
    margin-bottom: 10px;
}
.blockza-header {
position: absolute;
 top: 0px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    color: white;
    font-weight: bold;
}

.blockza-avatar {
    width: 40px; /* Adjust size */
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
}

.blockza-info h3 {
    font-size: 18px;
    margin: 0;
    color: white;
    font-weight: bold;
}

.online-status {
    font-size: 14px;
    font-weight: bold;
}

/* AI Avatar Image */
.avatar-container {
	top:130px;
    position: relative;
    width: 250px; /* Adjust as needed */
    height: 350px; /* Adjust as needed */
    display: flex;
    align-items: center;
    justify-content: center;
}
.blockza-avatar-img {
    width: 420px; /* Adjust based on need */
    height: auto;
   
}  
.blockza-message-bubble {
	 top:145px;
	background-color: #f5ca00; /* Matches the screenshot */
    color: white;
    border-radius: 20px; /* Smooth rounded corners */
    padding: 1rem;
    max-width: 350px; /* Controls width */
    position: relative;
    font-family: 'Arial', sans-serif;
    text-align: left;
}

/* Title Styling */
.blockza-message-bubble .blockza-title {
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;color:#000
}

/* Paragraph Text */
.blockza-message-bubble .blockza-text {
    font-size: 12px;
    line-height: 1.5;
    color: #000;
}

/* Upper-Right Symbol */
.blockza-message-bubble .blockza-corner-symbol {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 20px;
    color: white;
} 

.avatar-img {
    max-width: 150px;
    border-radius: 50%;
}
#no-wave, #blockza-wave {
    position: absolute; /* Keep both images at the same position */
    top: 134px;
    left: 35px;
    width: 267px; /* Adjust as needed */
    height: auto;
}

#blockza-wave {
    display: none; /* Initially hidden */
}

#no-wave {
    display: block; /* Initially visible */
}
.chatbot-wrap{display:grid;grid-template-rows:1fr auto;height:100%}
.chatbot-chat-wrap{overflow:auto;position:relative}
.main-chat-wrap{position:absolute;top:35px;right:0;bottom:0;left:0}
.avatar-wrap{gap:.5rem;margin-top:.5rem}
.avatar-wrap .icon-avatar-blockza{width: auto; height: 100px;}
.avatar-wrap h1{font-size:.9rem;color:#000}
.avatar-wrap .icon-waving-hand{width:25px;height:20px;display:inline-block}
.text-y-ai{margin:0;font-size:.75rem;font-style:italic;color:#fff}
.left-panel-cont{background:url(./images/img-dots-bg.png) no-repeat;height:100%;width:100%;background-size:cover;padding:1rem}
.icon-humburger{width:35px;height:35px;filter:invert(100%) sepia(100%) saturate(0%) hue-rotate(211deg) brightness(103%) contrast(102%);}
@media (min-width: 768px) {
	#emailSubmissionModal{left:100px}
        
	.mobile-sidebar{display:none !important;}
	#chat-box{height: auto!important;}
	/* Left panel full height */
.left-panel {
    background-color: #015de6; /* Blue background */
    height: 100vh;
    padding: 0;
    text-align: center;
    position: relative;
}

/* AI Avatar Heading */


/* Chat Bubble */
.chat-bubble {
    background-color: #FFD700; /* Yellow bubble */
    color: black;
    padding: 10px 15px;
    border-radius: 20px;
    text-align: left;
    width: 80%;
    margin-top: 15px;
    font-size: 14px;
    position: relative;
}

/* Chat Bubble Pointer */
.chat-bubble::after {
    content: "";
    position: absolute;
    top: 50%;
    left: -10px;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid #FFD700; /* Yellow bubble pointer */
}
}
   
@media (max-width: 767.98px) {
	 .modal-dialog {
        max-width: 95%; /* Reduce modal width for mobile */
    }
	.bookMeetingModal .modal-dialog {
        position: fixed;
        bottom: 0;
        margin: 0;
        left: 2%;
        transform: translateX(-50%);
        width: 100%;
        max-width: 95%;
    }
	/* Avatar Styling */
#emailSubmissionModal{top:220px;}

/* Voice Mode Button */
.voice-mode-btn{
	bottom: 0px!important;
	left: 20px!important;
	font-size:10px!important;
	
}
.mobile-text-header {
    font-size: 18px;
    font-weight: bold;
    text-align: left;
    color: #000;
    max-width: 100%;
}

/* Ensure proper line breaks and spacing */
.mobile-text-header p {
    margin:0px 0;
    padding: 5px;
}

/* Hand-drawn circle effect for "Instantly!" */
.mobile-text-header .highlighted-text {
    display: inline-block;
    position: relative;
    z-index: 1;
}



	
	
	.desktop-sidebar{display:none!important;}
.chat-bot-xs-wrap{display:grid;grid-template-rows:auto 1fr}	
    .message {
        max-width: 100% !important; /* ✅ Ensure messages take almost full width */
    }

  

    .left-panel img.avatar-img {
        width: 50px; /* ✅ Make avatar smaller */
        height: 50px;
        border-radius: 50%;
        margin-right: 10px;
    }

    .left-panel h3 {
        font-size: 16px;
        color: white;
        margin: 0;
    }


	 .left-panel {
		  display: flex;
        background: #0057b8; /* ✅ Remove Background */
        width: 100%;
        flex-direction: row !important; /* ✅ Change to row on mobile */
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 45px;
        gap: 10px; /* ✅ Add space between elements */
    }

.left-panel   .wave {
        width: 170px !important; /* ✅ Keep wave on right */
        height: auto !important;
        margin-left: auto; /* ✅ Push wave to the right */
    }

    .left-panel .avatar-img {
        width: 40px; /* ✅ Reduce avatar size */
        height: 40px;
        border-radius: 50%;
    }

    .left-panel h3 {
        font-size: 14px;
        color: white;
        margin: 0;
    }
	.modal {
    width: 100%;
    height: 60%;
}
	
    
    .modal-content {
        border-radius: 10px; /* Optional: Add rounded corners */
    }
    
    .modal-header {
        padding: 12px; /* Reduce header padding */
    }
    
    .modal-body {
        padding: 15px; /* Reduce body padding */
    }

    .close {
        font-size: 24px; /* Increase close button size for touch */
    }
}

.modal-scrollable {
    max-height: 70vh; /* Limit modal height to 70% of the viewport */
    overflow-y: auto; /* Enables scrolling */
    scrollbar-width: thin; /* For Firefox */
    scrollbar-color: #0078ff #1a1c3b; /* Scroll thumb and track for Firefox */
}

/* Scrollbar for WebKit Browsers */
.modal-scrollable::-webkit-scrollbar {
    width: 8px; /* Thin scrollbar */
}

/* Scroll Track */
.modal-scrollable::-webkit-scrollbar-track {
    background: #1a1c3b; /* Dark track */
    border-radius: 10px;
}

/* Scroll Thumb */
.modal-scrollable::-webkit-scrollbar-thumb {
    background: #0078ff; /* Blue scrollbar thumb */
    border-radius: 10px;
    transition: background 0.3s ease-in-out;
}

/* Scroll Thumb on Hover */
.modal-scrollable::-webkit-scrollbar-thumb:hover {
    background: #005bb5; /* Darker blue on hover */
}

.btn-block-speak {
    background: linear-gradient(90deg, #007bff, #0056b3);
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 8px;
    transition: all 0.3s ease-in-out;
}

.btn-block-speak:hover {
    background: linear-gradient(90deg, #0056b3, #003f7f);
    transform: scale(1.05);
}

/*------------------blockza-side-u logo----------------*/
.blockza-text-img {
	top: 64px;
    left: 8px;
    position: absolute;
   /*  max-width: 50%; */
    height: auto;
    margin-top: 10px;
}
.voice-mode-btn {
	left:75px;
	bottom:164px;
	position: absolute;
    background-color: #FFC107; /* Yellow background */
    color: black; /* Text color */
    font-weight: bold;
    border-radius: 30px; /* Rounded button */
    font-size: 14px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Soft shadow */
    transition: all 0.3s ease-in-out;
}

.voice-mode-btn:hover {
    background-color: #E0A800; /* Darker yellow on hover */
    transform: scale(1.05); /* Slight zoom effect */
}

/* .user .play-button-container{top:-22px !important;} */
.user .play-button-container {display:none!important;}
.companiesss .play-button-container {display:none!important;} 

.background-overlay{
	
position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    height: 40%;
    background: linear-gradient(to top, #0057FF, #0057FF 80%, transparent 100%);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;

	}
/*------------------blockza-side-u logo----------------*/
.play-button-container{position:absolute;top:20px;right:20px}
.title-left-bar h1{font-size:2rem;color:#fff;margin:0;font-weight:bold}

.offcanvas-body .nav-link {
    font-size: 16px;
    padding: 10px 15px;
    transition: 0.3s;
}

.offcanvas-body .nav-link:hover {
    background: #f8f9fa; /* Light hover effect */
    border-radius: 5px;
}