/* Reset some default styles for better consistency across browsers */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
}


.content-wrap {
    flex: 1 0 auto; /* This makes the content area flexible and pushes the footer down */
}

body, p, ul, li, form, input, select {
    margin: 0;
    padding: 0;
}

.body-frame {
    flex: 1;
    margin-top: 150px; /* Adjust based on the height of your top bar */
    margin-bottom: 10px; /* Adjust based on the height of your footer */
    overflow-y: auto;
    padding: 10px;
    padding-bottom: 50px; /* Optional */
}

body {
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f4;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Use at least 100vh (viewport height) for full-height content */

}

#header {
    background-color: #333;
    color: #fff;
    padding: 10px;
}

nav ul {
    list-style-type: none;
}

nav ul li {
    display: inline;
    margin-right: 20px;
}

nav a {
    text-decoration: none;
    color:  #000;
    font-weight: bold;
}

h1, h2, h3 {
    margin-top: 20px ;
    text-align: left ;
    margin-left: 20px;
    color: #079ce9;
}


table {
    width: 80%;
    margin: 20px auto;
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid #ddd;
}

th {
    background-color: violet; /* Set the background color for the heading */
    padding: 10px; /* Add padding to the heading for spacing */
    text-align: left; /* Align the text to the left within the heading */
}

th, td {
    padding: 10px;
    text-align: left;
}

form {
    width: 50%;
    margin: 20px auto;
}

label {
    display: block;
    margin-bottom: 5px;
}

input, select {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
}

input[type="submit"] {
    background-color: #333;
    color: #fff;
    cursor: pointer;
}

.completed-trainings-list {
    list-style: none;
}

.completed-trainings-list li {
    margin-bottom: 20px;
}

.feedback-actions {
    margin-top: 10px;
}

.action-link {
    display: inline-block;
    padding: 8px 12px;
    margin-right: 10px;
    text-decoration: none;
    color: #fff;
    background-color: #333;
    border-radius: 4px;
}

.action-link:hover {
    background-color: #555;
}

/* Dropdown container */
.dropdown {
    display: inline-block;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: darkcyan;
    color:#000;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    display: block;
    text-decoration: none;
}

.dropdown-content span {
    color:#000;
}
/* Change color on hover */
.dropdown-content a:hover {
    background-color: darkblue;
}

/* Show the dropdown content when the mouse is over the dropdown container */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Style for the active tab */
.dropdown-content a.active {
    background-color: #ddd;
    color: black;
}


/* Media query for screens smaller than 600px (adjust as needed) */
@media screen and (max-width: 600px) {
    #extended-topbar, #top nav ul {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    #extended-topbar nav ul li,
    #top nav ul li {
        margin: 0 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #extended-topbar nav ul li a,
    #top nav ul li a {
        text-align: center;
        color: #000 !important; /* Set text color to black */
    }

    #extended-topbar nav ul li a span,
    #topbar nav ul li a span {
        display: none; /* Hide text for mobile */
    }
    #topbar span {
        color: whitesmoke
    }
    /* Style for the icons */
    .action-icons, td.actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 10px;
    }

    .action-icons a, td.actions a {
        margin: 10px;
        margin-right: 20px;
        text-align: center;
        display: inline-block;
        color: #000; /* Set text color to black */
    }
    td.actions .action-icons a {
        margin: 10px; /* Adjust the margin for desktop */
        margin-right: 20px; /* Adjust the right margin for desktop */
    }
}
/* Add this CSS to style your footer */
footer {
    flex-shrink: 0; /* Prevents the footer from shrinking */
    background-color: #f2f2f2;
    padding: 20px;
    text-align: center;
    height: 20px;
    position: fixed;
    width: 100%;
    z-index: 100;
    bottom: 0;
    color: white;
    background-color: darkslateblue;
}

#footer-content {
    max-width: 1200px;
    margin: 0 auto;
}

#footer-links {
    margin-bottom: 5px;
}

#footer-links a {
    margin-right: 20px;
    color: white;
    text-decoration: none;
}

#footer-links a:hover {
    text-decoration: underline;
}

#copyright {
    font-size: 14px;
    color: whitesmoke;
}

/* Add this CSS to style your extended top bar and top bar */
#extended-topbar {
    background: linear-gradient(to right, #8A2BE2, #5E4FA2);
    padding: 10px 20px;
    color: #fff;
    width: 100vw;
    top: 0;
    display: flex;
    justify-content: space-between; /* Align items to the left and right edges */
    align-items: center;
    position: fixed;
    z-index: 100;
}

.left-items, .right-items {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.left-items, .right-items {
    display: flex;
    align-items: center;
}

.left-items nav ul {
    list-style-type: none;
    display: flex;
    padding: 0;
    margin: 0;
}

.left-items nav ul li {
    margin-left: 20px;
}

.left-items nav ul li a {
    text-decoration: none;
    color: #fff;
    display: flex;
    align-items: center;
}

.left-items nav ul li a i {
    margin-left: 5px;
}

.right-items #back-navigation a {
    text-decoration: none;
    color: #fff;
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
}

.right-items #back-navigation a i {
    margin-right: 50px;
}
#topbar {
    background-color: darkslateblue !important;
    color-scheme: normal;
    color: white; /* Set text color to black */
    padding: 10px 20px;
    display: flex;
    width: 100vw;
    margin-top: 100px;
    justify-content: space-between;
    position: fixed;
    align-items: center;
    z-index: 100;
}

#topbar span {
    color: whitesmoke;
}

#topbar li a i {
    margin-right: 8px; /* Adjust the spacing to your preference */
}
#topbar.dropdown-content {
    background-color: darkcyan;
}

#company-logo img {
    max-height: 100%; /* Adjust as needed */
    max-width: 100%; /* Adjust as needed */
    display: block;
    margin: 0 auto;
    width: 80px; /* Set a specific width for the logo */
    height: auto; /* Maintain the aspect ratio */
}

#user-info img {
    max-height: 100%; /* Adjust as needed */
    max-width: 100%; /* Adjust as needed */
    border-radius: 50%;
    width: 50px; /* Set a specific width for the user photo */
    height: auto; /* Maintain the aspect ratio */
    margin-right: 10px;
}
#user-profile {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Align items to the left */
}

#user-info #logout  {
    display: flex;
    align-items: center;
    margin: 20px;
    white-space: nowrap; /* Prevents the button from stretching */
}

#user-info span {
    margin-left: 10px; /* Add spacing between user photo and username */
}

#user-info {
    display: flex;
    align-items: center;
    width: 100%;
    margin-left: 10px;
    justify-content: space-between; /* Use if you want to maximize space between elements */
}

#userName {
    white-space: nowrap; /* Prevents the name from wrapping */
    flex-grow: 1;
    margin-right: 50px; /* Adjust the spacing as needed */
}

.icon-spacing {
    margin-right: 8px; /* Adjust the space as needed */
}

  #logout {
    background-color: #f44336; /* Red background color for the logout button */
    color: white;
    border: none;
    cursor: pointer;
    text-align: left; /* Adjust text alignment */
    width: 100%; /* Make the button full-width */
    white-space: nowrap; /* Prevents the button from stretching */
    padding: 5px 10px; /* Adjust padding as needed for visual appeal */
    display: flex; /* Aligns the icon and text nicely */
    align-items: center;
    margin-left: 20px;
  }
  
  #logout:hover {
    background-color: #d32f2f; /* Darker red color on hover */
  }
  
  #logout i {
    margin-right: 5px; /* Adjust icon spacing */
  }

#dropdown-content {
    display: none;
    position: absolute;
    background-color: #333;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    right: 0; /* Align the dropdown to the right */
    margin-top: 5px; /* Add a small margin to separate button and dropdown */
}
#dropdown-content {
    display: none;
    position: absolute;
    background-color: #fff; /* Change background color to white or a lighter color */
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    right: 0;
    margin-top: 5px;
}

/* Remove dark background for dropdown items */
#dropdown-content a {
    color: #333; /* Change text color to a darker color */
    padding: 12px 16px;
    display: block;
    text-decoration: none;
    transition: background-color 0.3s; /* Add smooth transition for background color */
}
#dropdown-content span {
    color:#000;
}

/* Change background color on hover */
#dropdown-content a:hover {
    background-color: #f1f1f1;
}
/* Add an arrow indicator */
#dropdown-content::before {
    content: "";
    position: absolute;
    top: -10px; /* Adjust as needed */
    right: 15px; /* Adjust as needed */
    border-width: 0 8px 8px;
    border-style: solid;
    border-color: transparent transparent #333;
}

/* Style for the icons */
.action-icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
}

.action-icons a {

    text-align: left;
    display: inline-block;
    color: blue; /* Set text color to black */
    margin: auto;
}

/*Style for the icons*/
td.actions{
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
}

td.actionsa {

    text-align: left;
    display: inline-block;
    color: blue; /* Set text color to black */
    margin: auto;

}

/* Align the button to the right */
#table-container {
    text-align: right;
}
/* Zebra-striping for table body rows */
table tbody tr:nth-child(even) {
    background-color: #f2f2f2; /* Light grey for even rows */
}

table tbody tr:nth-child(odd) {
    background-color: #ffffff; /* White for odd rows */
}
table {
    width: 100%;
}

.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 20px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: red;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 20px; /* Round the switch */
}

.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%; /* Round the slider */
}

input:checked + .slider {
    background-color: #28a745; /* Green background when switch is on */
}

input:focus + .slider {
    box-shadow: 0 0 1px #28a745; /* Green shadow when switch is focused */
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

#content {
    position: relative;
}

#create-user-button {
    display: flex;
    text-align: right;
    margin-right: 20px;
    margin: 10px 0; /* Adjust margin for spacing above the table */
    padding: 8px 12px; /* Adjust padding for button size */
    background-color: coral; /* Set the background color to blue */
    color: #fff; /* Set the text color to white */
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* Hover effect for the button */
#create-user-button:hover {
    background-color: darkblue; /* Change the background color on hover */
}

#create-training-button {
    display: flex;
    text-align: right;
    margin-right: 20px;
    margin: 10px 0; /* Adjust margin for spacing above the table */
    padding: 8px 12px; /* Adjust padding for button size */
    background-color: coral; /* Set the background color to blue */
    color: #fff; /* Set the text color to white */
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* Hover effect for the button */
#create-training-button:hover {
    background-color: darkblue; /* Change the background color on hover */
}

#connect-button {
    display: flex;
    text-align: right;
    margin-right: 20px;
    margin: 10px 0; /* Adjust margin for spacing above the table */
    padding: 8px 12px; /* Adjust padding for button size */
    background-color: green; /* Set the background color to blue */
    color: #fff; /* Set the text color to white */
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* Hover effect for the button */
#connect-button:hover {
    background-color: lightgreen; /* Change the background color on hover */
}

#reset-button {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 1000;
    text-align: right;
    margin-right: 20px;
    margin: 10px 0;
    padding: 8px 12px;
    background-color: red;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* Hover effect for the button */
#reset-button:hover {
    background-color: pink; /* Change the background color on hover */
}

/* Style to display buttons in the same row */
.button-container {
    display: flex;
    gap: 10px; /* Adjust the gap between buttons as needed */
}
/* Add more specific styles as needed */

/* Documents page styles */
.checkbox-row {
    display: flex;
    justify-content: flex-start;
}

#tabs {
    display: flex;
    justify-content: space-around;
    margin-bottom: 10px;
}



#documents-container {
    display: flex;
    justify-content: space-between;
    margin-right: 60px;
    width: calc(100% - 60px); /* Adjust the width to account for the sidebar */

}

.content-box {
    display: none; /* Initially hidden */
    flex: 1;
    border: 1px solid #ccc;
    padding: 10px;
    margin-right: 10px;
    height: calc(100% - 150px); /* Or set to a specific height as needed */
    overflow-y: auto;
    border: 1px solid #ccc; /* Border for content boxes */
    padding: 10px;
    margin-top: 5px; /* Spacing between tabs and content box */
    width: calc(100% - 50px); /* Reduce width, adjust as needed */
    font-size: 0.9em; /* Reduce font size, adjust as needed */
    box-sizing: border-box; /* Include padding and border in the box's size */
}

/* Additional class to add to the main content area when the tray is open */
.main-content-area.pull-out-open {
    width: calc(100vw - (100vw / 3)); /* Adjust width to take into account the pull-out tray */
    transition: width 0.3s ease-in-out; /* Smooth transition */
    padding-bottom: 50px; /* Optional */
}

.content-box .editable-content, .content-box .actions {
    /* Adjust sizes and margins for child elements as needed */
    margin-bottom: 5px; /* Example: reduce bottom margin */
}

.content-box:last-child {
    margin-right: 0;
}

.content-box .actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

.content-box button {
    margin-right: 10px;
}


/* Tab styling */
.tab {
    cursor: pointer;
    padding: 10px;
    margin: 0 5px; /* Spacing between tabs */
    border: 1px solid #ccc; /* Border for tabs */
    background-color: #f0f0f0; /* Inactive tab background */
}

/* Active tab styling */
.tab.active {
    background-color: #007bff; /* Active tab background */
    color: white; /* Active tab text color */
    border-bottom: none; /* Make active tab blend with content box */
}

/* Style the tab */
.tab {
    font-size: medium;
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
    margin-right: 10px;
}

/* Style the buttons inside the tab */
.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    color: blue;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: blueviolet;
    color: white;
}
/* Top bar menu item */
.active {
    color: #fff; /* White text color */
    background-color: #007bff; /* Blue background */
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}

/* Pull-out tray styling */

.pull-out-tray {
    position: fixed;
    right: 0;
    top: 0;
    width: calc(100vw / 3); /* One third of the view area */
    height: 100%;
    background: #fff;
    box-shadow: -2px 0 5px rgba(0,0,0,0.5);
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    margin-top: 150px;
    padding-bottom: 50px; /* Optional */
    padding: 10px;    
    max-height: calc(100vh - 200px); /* Adjust based on your header/footer */
    z-index: 1100;
}



.main-content-area.reduced {
    /* Adjust the width to account for the pull-out tray; 
       e.g., if the tray is 33.33vw, you might want the content area to take the rest */
    width: 66.67vw;
    transition: width 0.3s ease-in-out; /* Smooth transition for width adjustment */
}

.pull-out-tray.open {
    transform: translateX(0);
}

/* Handle for the pull-out tray */
.tray-handle {
    position: absolute;
    left: -30px; /* Adjust based on handle size */
    top: 50%;
    width: 30px; /* Adjust based on handle size */
    height: 60px; /* Adjust based on handle size */
    background: #007bff;
    color: white;
    text-align: center;
    line-height: 60px; /* Adjust based on handle size */
    cursor: pointer;
    transform: translateY(-50%);
    z-index: 1101;
}

.editable-content {
    padding: 10px; /* Add padding inside the editable content area */
    box-sizing: border-box; /* Include padding in the element's total width and height */
    overflow-wrap: break-word; /* Ensure long words don't overflow */
    word-wrap: break-word; /* Legacy support for older browsers */
    max-width: 100%; /* Ensure the content area doesn't exceed its container */
    height: calc(100% - 150px); /* Or set to a specific height as needed */
    overflow-y: auto;
}


/* Food Image Analysis */
.image-preview {
    width: 100%; /* Fixed width for portrait desktop */
    height: 80%; /* Maintain the aspect ratio */
    align-items: center;
    border: 1px solid #ccc; 
    overflow: auto;
}
#uploaded-image {
    width: auto; /* Make the image responsive to the container width */
    height: auto; /* Maintain the aspect ratio */
    align-items: center;
    display: block; /* Remove any default inline spacing */
    max-height: 100%; /* Ensure the image doesn't exceed the container height */

}

/* Triage */
.video-chat-container {
    display: flex;
    align-items: flex-start;
}

.video-container {
    /* Adjust as needed */
    margin-right: 20px;
}

.chat-container {
    display: none; /* Initially hidden */       
    flex-direction: column;
    width: 300px; 
}

.chat-messages {
    overflow-y: auto;
    height: 200px;
    border: 1px solid #ccc;
    margin-bottom: 10px;
}

/* Documents Page Side Bar settings */

#sidebar {
    position: fixed;
    right: 0;
    top: 140px;
    width: 50px; /* Adjust width as necessary */
    height: 100%; /* Full height */
    background-color: #f0f0f0; /* Light grey background */
    z-index: 100; /* Ensures the sidebar is above most other content */
    display: flex;
    flex-direction: column; /* Aligns icons vertically */
    align-items: center; /* Centers icons horizontally */
    padding-top: 20px; /* Adds some space at the top */
    z-index: 1101;    
    padding-bottom: 800px; /* Optional */
    padding: 10px;    
    max-height: calc(100vh - 190px); /* Adjust based on your header/footer */
}

.sidebar-icon {
    margin-bottom: 20px; /* Space between icons */
    cursor: pointer; /* Changes cursor to pointer on hover */
    width: 30px; /* Width of the icons */
    height: 30px; /* Height of the icons */
    background-color: #e0e0e0; /* Light grey background for icons */
    display: flex;
    justify-content: center; /* Centers icon text horizontally */
    align-items: center; /* Centers icon text vertically */
    border-radius: 50%; /* Makes icons circular */
}

.content-container {
    display: none; /* Initially hide the content */
    position: fixed;
    right: 50px; /* Adjust based on the width of the sidebar */
    top: 150px;
    width: calc(100% - 60%); /* Takes remaining width */
    height: 100%; /* Full height */
    background-color: #fff; /* White background */
    padding: 20px; /* Adds padding inside the content container */
    box-sizing: border-box; /* Includes padding in width and height */
    overflow-y: auto; /* Adds vertical scroll if content overflows */
    padding-bottom: 50px; /* Optional */
    padding: 10px;    
    max-height: calc(100vh - 200px); /* Adjust based on your header/footer */
}
.mic-button {
    background-color: #3498db;
    color: white;
  }
  
.mic-button.active {
    background-color: #e74c3c;
    color:white;
  }

.typing-indicator {
    display: none; /* Hidden by default */
    margin: 10px;
}

.typing-indicator span {
    height: 8px;
    width: 8px;
    margin: 0 3px;
    background-color: #333;
    border-radius: 50%;
    display: inline-block;
    animation: typing 1.4s infinite both;
}

@keyframes typing {
    0%, 40%, 100% {
        transform: translateY(0);
    }
    20% {
        transform: translateY(-10px);
    }
}

.has-submenu {
    position: relative; /* This makes sure that the absolute positioning of the submenu is relative to this item */
}

.submenu {
    display: none; /* Hidden by default */
    position: absolute; /* Positioning relative to its parent due to the above rule */
    left: 0; /* Align with the left edge of the parent item */
    top: 100%; /* Position directly below the parent item */
    z-index: 1200; /* Ensure it's above other content */
    background-color: #B19CD9; /* Light purple background */
    min-width: 200px; /* Minimum width, adjust as needed */
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); /* Optional: Add some shadow for depth */
    border: none; /* Remove any default borders */
}



/* Submenu item styles */
.submenu li a {
    color: white; /* White text color */
    padding: 10px 15px; /* Adequate padding for touch targets */
    text-decoration: none; /* No underlines on links */
    display: block; /* Ensure it takes up the full width */
    background-color: #B19CD9; /* Light purple background */
}

/* Submenu item hover/focus styles */
.submenu li a:hover, .submenu li a:focus {
    background-color: #6A0DAD; /* Darker purple background on hover/focus */
}

.has-submenu-robot {
    position: relative; /* This makes sure that the absolute positioning of the submenu is relative to this item */
}

.submenu-robot {
    display: none; /* Hidden by default */
    position: absolute; /* Positioning relative to its parent due to the above rule */
    left: 0; /* Align with the left edge of the parent item */
    top: 100%; /* Position directly below the parent item */
    z-index: 1200; /* Ensure it's above other content */
    background-color: #B19CD9; /* Light purple background */
    min-width: 200px; /* Minimum width, adjust as needed */
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); /* Optional: Add some shadow for depth */
    border: none; /* Remove any default borders */
}



/* Submenu item styles */
.submenu-robot li a {
    color: white; /* White text color */
    padding: 10px 15px; /* Adequate padding for touch targets */
    text-decoration: none; /* No underlines on links */
    display: block; /* Ensure it takes up the full width */
    background-color: #B19CD9; /* Light purple background */
}

/* Submenu item hover/focus styles */
.submenu-robot li a:hover, .submenu-robot li a:focus {
    background-color: #6A0DAD; /* Darker purple background on hover/focus */
}
.patient-details-container {
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 5px;
    max-width: 600px;
    margin: 20px auto;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.patient-details {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.patient-detail {
    display: flex;
    justify-content: space-between;
}

.patient-detail span, .patient-detail label {
    margin-right: 10px;
}

.patient-detail label {
    font-weight: bold;
}
/* Chat Widget Styles */

#chatWrapper {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background: transparent;
    border: none;
    display: none;
    z-index: 9999;
    transition: all 0.3s ease;
    overflow: hidden;
  }
  
  #chatWrapper.expanded {
    width: 400px;
    height: 600px;
    border-radius: 12px;
  }
  
  #chatWrapper.minimized {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: transparent;
  }
  
  /* Iframe always fills space */
  #avatarIframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    background: transparent;
  }
  
  /* Hide iframe in minimized if needed (optional) */
  /* You can comment this if you want video to be shown while minimized */
  /*
  #chatWrapper.minimized #avatarIframe {
    display: none;
  }
  */
  
  #iframeLoader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    font-size: 18px;
    color: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
  }
  
  /* Chat header hidden by default, appears on hover when expanded */
  #chatHeader {
    position: absolute;
    top: 0;
    left: 0;
    height: 40px;
    width: 100%;
    background-color: rgba(245, 245, 245, 0.9);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 10px;
    opacity: 0;
    transition: opacity 0.3s ease;
    padding-right: 10px;
    padding: 0 10px;
    z-index: 10000;
    overflow: visible;
  }
  
  #chatWrapper.expanded:hover #chatHeader {
    opacity: 1;
  }
  
  /* Hide expand button if expanded */
  #chatWrapper.expanded #expandBtn {
    display: none;
  }
  
  /* Launch Button */
  #launchChatBtn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 12px 16px;
    font-size: 16px;
    background-color: #0084ff;
    color: white;
    border: none;
    border-radius: 24px;
    cursor: pointer;
    z-index: 9998;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  }
  
  /* Control Buttons */
  #chatHeader button {
    background: none;
    border: none;
    font-size: 16px;
    margin-left: 10px;
    cursor: pointer;
    color: #333;
    padding: 5px 10px;
  }
  
  /* Hide expand controls when minimized */
  #chatWrapper.minimized #chatHeader,
  #chatWrapper.minimized #iframeLoader {
    display: none;
  }
  #clickCatcher {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: none; /* Only shown in minimized mode */
    cursor: pointer;
  }
  #chatWrapper.minimized #clickCatcher {
    display: block;
  }