:root {
    --autofill-bg: #f8f9fa;
    --autofill-text: #202124;
    --autofill-hover-bg: #e0e0e0;
    --autofill-hover-text: #202124;
}
/* General styles  <meta name="author" content="Amit Gambhir, LogicSense Ltd."> */
body {
  font-family: 'Avenir Next', sans-serif;
  -webkit-user-select: none; / Safari /        
  -moz-user-select: none; / Firefox /
  -ms-user-select: none; / IE 10+ /
  user-select: none; / Standard syntax /
}
/* Add this to your CSS file */
.message-separator {
  display: inline-block;
  text-align: center;
  background-color: #EEEAE3; /* Light beige background color */
  border-radius: 15px; /* Rounded corners */
  padding: 5px 10px; /* Padding inside the rectangle */
  color: #888; /* Grey text color */
  font-style: italic;
  margin: 10px auto; /* Center the separator and add space above and below */
}
/* Chatbot container styles */
#chatbot {
  width: calc(80vw - 10px); /* Adjusted width considering possible scrollbar */
  height: calc(100vh - 10px); /* Adjusted height considering possible scrollbar */
  margin: 0 auto;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 10px; /* Rounded corners */
  display: flex; /* Use flexbox */
  flex-direction: column; /* Arrange children vertically */
}

/* Chat window styles */
#chat-window {
  flex-grow: 1; /* Allow the chat window to grow to fill available space */
  position: relative; /* Make the logo container position relative */
  overflow-y: auto;  /*Enable vertical scrolling */
/*  border: 1px solid #009898;*/
  margin-top: 28px;
  margin-bottom: 10px;
  box-sizing: border-box;
  border-radius: 10px;
/*  background-color: white;*/
  text-align: center; /* Center inline-block elements within the chat window */
}
#chat-window::-webkit-scrollbar {
display: none; /* For Chrome, Safari, and Opera */
}

/* Logo container styles */
#logo-container {
  position: fixed; /* Position the logo container relative to the chat window */
  top: 50%; /* Align the top of the logo container to the middle of the chat window */
  left: 50%; /* Align the left of the logo container to the middle of the chat window */
  transform: translate(-50%, -50%); /* Center the logo container */
  text-align: center;
    z-index: -1;
}

/* Logo image styles */
#logo {
  width: 80px; /* Set logo width */
}

/* Welcome message styles */
#welcome-message {
  font-size: 16px;
  margin-top: 10px;
  color: #009898;
  font-style: italic;
}

/* Hint message styles */
#hint-message {
  font-size: 2rem;
  margin-top: 10px;
  color: #595959; /* Hint text color */
  /*font-style: italic;*/
}
@keyframes textShine {
  0% {
    background-position: -100% 0;
  }
  50% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

.hello {
  font-weight: 600;
  background-image: linear-gradient(to right, 
    rgba(0, 152, 152, 1) 0%, 
    rgba(60, 255, 82, 1) 33%, 
    rgba(113, 130, 255, 1) 66%, 
    rgba(0, 152, 152, 1) 100%);
  background-size: 300% 100%; /* Increased size for smoother transition */
  background-position: -100% 0; /* Start from left */
  -webkit-background-clip: text;
  color: transparent;
  animation: textShine 5s ease infinite;
}

/* User input container styles large display*/
#user-input-container {
position: fixed; /* Change from relative to fixed */
top: 0; /* Stick to the top of the window */
left: 0; /* Align to the left edge */
right: 0; /* Align to the right edge */
width: 75%; /* to Ensure it spans the full width set it to 100% */
display: flex;
justify-content: center; /* Center the content horizontally */
/*background-color: white;  Add a background color to avoid content overlap */
z-index: 1000; /* Ensure it stays on top of other elements */
padding: 10px; /* Add padding for better touch interaction */
box-sizing: border-box; /* Ensure padding is included in the width */
margin: 0 auto; /* Center the container itself */
/*box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);  Optional: Add a shadow for better visibility */
align-items: center;
}
/* Wrap input + microphone together */
.input-wrapper {
  display: flex;
  align-items: center;
  position: relative;
  flex-grow: 1; /* Let it expand */
}
/* User input field styles */
#user-input {
  flex-grow: 1;
  min-height: 41px;
  border-radius: 5px;
  padding-left: 12px;
  padding-right: 40px; /* space for mic */
  border: 1px solid #595959;
}

#user-input:focus {
  border-color: #009898;
  outline: none; /* remove default outline */
}
.toggle {
  position: relative;
  display: inline-block;
  width: 32px; /* Adjust the width of the container to match the icon size */
  height: 32px; /* Adjust the height of the container to match the icon size */
}

.toggle input {
  display: none;
}

.autofill.button-style {
  display: inline-block;
  padding: 10px 20px;
  margin: 5px;
  border: 1px solid var(--autofill-border, #dadce0);
  border-radius: 10px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  background-color: var(--autofill-bg, #f8f9fa);
  color: var(--autofill-text, #202124);
  -webkit-text-fill-color: var(--autofill-text, #202124); /* match text color */
  transition: background-color 0.3s, color 0.3s;
  font-size: 15px; /* or 18px, or any size you prefer */
}

.autofill.button-style:hover {
  box-shadow: 0 1px 1px rgba(0,0,0,.1);
  background-color: var(--autofill-hover-bg, #f8f9fa);
  color: var(--autofill-hover-text, #202124);
  -webkit-text-fill-color: var(--autofill-hover-text, #202124);
}

.button-style {
  padding: 10px 15px;
  border: 2px solid var(--brand-color);
  border-radius: 10px;
  background-color: var(--button-bg);
  color: var(--button-text);
  cursor: pointer;
  font-size: 14px;
}
.button-style.visited {
background-color: white !important;
color: #595959 !important;
border: 2px solid #dadce0 !important;
position: relative;
padding-left: 30px; /* Increased padding to make more space for the tick mark */
}

.button-style.visited::before {
content: "✓";
color: #595959;
position: absolute;
left: 10px; /* Position of the tick mark */
font-size: 16px; /* Size of the tick mark */
margin-right: 10px; /* Increased space after the tick mark */
}

/* When the microphone is in listening state (active) */
.microphone-icon.listening {
  color: #4CAF50; /* Green for listening */
}

/* When the microphone is turned on (active recording state) */
.microphone-icon.on {
  color: #2196F3; /* Blue for on state */
}

/* When the microphone is clicked and in listening state, change icon */
.microphone-icon.listening {
  color: #4CAF50; /* Green for listening */
}

/* When the microphone is active (on) */
.microphone-icon.on {
  color: #2196F3; /* Blue for on state */
}

/* Placeholder styles for user input */
#user-input::placeholder {
  white-space: pre-wrap; /* Allow text to wrap */
}

/* Send button styles */
/* Send button with fixed width */
#send-button {
  background-color: #009898;
  border: none;
  min-height: 45px;
  min-width: 70px;
  padding: 0 15px;
  margin-left: 10px;
  color: white;
  cursor: pointer;
  border-radius: 10px;
  flex-shrink: 0;
  /* text-transform: uppercase; */

  /* Reset iOS Safari native styling */
  -webkit-appearance: none;
  appearance: none;

  /* Prevent iOS gradient line */
  background-image: none !important;
  box-shadow: none !important;

  /* Smooth text */
  -webkit-font-smoothing: antialiased;
  -webkit-text-fill-color: white; /* Ensures clean rendering on iOS */
}
/* Send button hover effect */
#send-button:hover {
  background-color: #007272; /* Darker color on hover */
}
#send-button:disabled {
  background-color: #ccc;
  color: #666;
  cursor: not-allowed;

  /* Prevent Safari from drawing that grey line */
  -webkit-appearance: none;
  appearance: none;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* Default state for Font Awesome microphone icon */
/* Microphone always stays inside input wrapper */
/* Shared base */
.microphone-icon {
  font-size: 20px;
  color: #009898;
  cursor: pointer;
}

/* Input mic (inside input field) */
.input-mic {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

/* Hint mic (inline in text) */
.hint-mic {
  position: static;   /* stays in text flow */
  transform: none;
  font-size: 1em;     /* matches text size */
  vertical-align: middle;
  cursor: default;    /* not clickable */
}

/* Conversation list item styles */

#conversation {
  padding-left: 10px;   /* Adjust left padding */
  padding-right: 10px;  /* Adjust right padding */
  max-width: 100%;
  box-sizing: border-box;
}

#conversation li {
list-style: none;
margin-bottom: 10px;
padding: 0 10px; /* Add horizontal padding */
 /* display: flex; Use Flexbox for alignment */
justify-content: left; /* Default alignment to the left */
font-size: 16px; /* or 18px, or any size you prefer */
}

/* User query text styles */
#conversation li.user {
color: #333;
background-color: #f0f0f0; /* Light grey background for user messages */
justify-content: center; /* Align user messages to the center horizontally */
align-items: center; /* Align text to the center vertically */
border-radius: 5px; /* Rounded corners for user messages */
text-align: center; /* Center text horizontally */
min-height: 30px; /* Minimum height for consistency */
display: flex; /* Use Flexbox for alignment */
padding: 5px; /* Adjust padding as needed */
}

/* Bot response text styles */
#conversation li.bot {
color: #007777;
/* background-color: #f0f0f0; Light grey background for bot messages */
border-radius: 5px; /* Optional: rounded corners for bot messages */
text-align: left;
min-height: 50px; /* Minimum height for consistency */
}

/* Chatbot response styles */
img.response-image {
  max-width: 400px; /* Set maximum width of images to 400 pixels */
  width: 100%; /* Set width to 100% to ensure responsiveness */
  border-radius: 10px; /* Rounded corners */
}
.response-image {
width: 200px;
transition: transform 0.3s ease;
/*cursor: pointer;*/
}
.large-image {
width: 500px;
height: auto;
}

.option-box {
display: inline-block;
border: 1px solid #009898;
padding: 10px;
margin: 5px 5px;
border-radius: 5px;
background-color: #f9f9f9;
cursor: pointer; /* Make the options look clickable */
}

.option-box.correct {
border-color: green;
color: green;
}

.option-box.incorrect {
border-color: red;
color: red;
}

/*dividing line separate above navigation button in content */
hr {
    border: none;                   /* Remove default border */
  border-top: 2px dashed #dadce0; /* Dashed line with desired color */
  background-size: 6px 2px;       /* Adjust size for dash pattern */
  height: 2px;                    /* Height of the dashed line */
  margin: 20px 0;                 /* Optional: Add spacing above and below */
  position: relative;
}
/* Apply styles to the table */
/* Make table responsive */
.table-wrapper {
  border-radius: 15px;
  border: 1px solid #ddd;
  overflow-x: auto;   /* 👈 allow horizontal scroll */
  -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
  max-width: 100%;    /* keep inside screen */
}

/* Style table */
.table-wrapper table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  min-width: 500px; /* 👈 ensures columns don’t squish too much on small screens */
}

th, td {
  padding: 8px;
  border: 1px solid #ddd;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}

tr:last-child td {
  border-bottom: none;
}

tr:first-child th:first-child {
  border-top-left-radius: 10px;
}

tr:first-child th:last-child {
  border-top-right-radius: 10px;
}

tr:last-child td:first-child {
  border-bottom-left-radius: 10px;
}

tr:last-child td:last-child {
  border-bottom-right-radius: 10px;
}
#conversation table {
  width: 100%;           /* Ensure the table fits within the container */
  table-layout: fixed;    /* Prevent table from expanding beyond container width */
  border-collapse: collapse;  /* Optional, for cleaner table design */
}

/* Optional: Prevent long text from causing overflow */
#conversation table td, 
#conversation table th {
  word-wrap: break-word;  /* Allow long words to break to next line */
  overflow-wrap: break-word; /* Ensure long content like URLs doesn't cause overflow */
}


/* Media Query for smaller screens */
@media screen and (max-width: 300px) {
    #chatbot {
    width: calc(100vw - 20px); /* Full width on smaller screens, considering padding */
  }
  #user-input-container {
    padding: 5px; /* Reduce padding on smaller screens */
      width: 100%; /* Full width on smaller screens */
    }

    #user-input {
    padding-left: 10px;
    padding-right: 30px; /* Adjust padding for smaller screens */
    }

#chatbot {
    width: 95%; /* Adjusted width for mobile */
    padding: 5px;
  }

  #logo {
    width: 50px; /* Adjusted width for mobile */
  }

  #user-input {
    width: calc(100% - 100px); /* Adjusted width for mobile */
    margin-bottom: 10px;
    min-height: 50px;
    padding: 5px;
    border-radius: 10px; /* Rounded corners */
  }

  #send-button {
    padding: 4px 5px; /* Adjusted padding for mobile */
  }
}
/* Class for scaling the image on hover */
.clickable-image {
    transition: transform 0.3s ease-in-out;
    cursor: pointer;
}

/* Apply scaling when hovering */
.clickable-image:hover {
    transform: scale(1.9);
    align-items: center;
    justify-content: center;
}


@media (max-width: 768px) {
    #chatbot {
    width: calc(100vw - 20px); /* Full width on smaller screens, considering padding */
  }
    #conversation {
    padding-left: 15px;  /* Adjust left padding for small screens */
    padding-right: 15px; /* Adjust right padding for small screens */
  }
    #conversation table {
    width: 100%;   /* Ensure table adjusts properly on smaller screens */
  }
    #user-input-container {
    padding: 5px; /* Reduce padding on smaller screens */
        width: 100%; /* Full width on smaller screens */
   }

    #user-input {
    padding-left: 10px;
    padding-right: 30px; /* Adjust padding for smaller screens */
    }
    #send-button {
    padding: 8px 16px; /* Adjust padding for smaller screens */
    }
    div[style*="display: flex"] {
        flex-direction: column;
    }
}
@media (max-width: 600px) {
    #chatbot {
    width: calc(100vw - 20px); /* Full width on smaller screens, considering padding */
  }
    #conversation {
    padding-left: 10px;
    padding-right: 10px;
    overflow-x: auto; /* Allow horizontal scroll */
  }
  #conversation li {
  font-size: 12px; /* 16 for desktop */
  }
     #conversation table {
    width: 100%;
    min-width: 600px; /* Ensure the table is wide enough, but doesn't overflow */
    table-layout: auto; /* Allows the table to dynamically adjust based on content */
  }
    #user-input-container {
    padding: 5px; /* Reduce padding on smaller screens */
        width: 100%; /* Full width on smaller screens */
    }

    #user-input {
    padding-left: 10px;
    padding-right: 30px; /* Adjust padding for smaller screens */
    }
    #send-button {
    padding: 8px 16px; /* Adjust padding for smaller screens */
    }
    .response-image {
    width: 100%;
    }
    .response-image + div {
    flex: 100%;
    padding-right: 0;
    }
    .autofill.button-style {
    font-size: 12px; /* or 18px, or any size you prefer */
}
}

.iframe-button {
  padding: 10px 15px;
  border: 2px solid #1267A4;
  border-radius: 10px;
  background-color: #1267A4;
  color: white;
  cursor: pointer;
  outline: none;
  font-size: 16px;
  font-family: 'Avenir Next', sans-serif;
}
.toggle-button {
  padding: 10px 15px;
  border-radius: 10px;
  background-color: #1267A4;
  color: white;
  cursor: pointer;
  outline: none;
  font-size: 16px;
  font-family: 'Avenir Next', sans-serif;
}

.button-style:hover {
  background-color: var(--button-hover);
  color: white;
}

/* Define styles for the survey button */
.survey-button {
    background-color: #007777; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 8px;
}

/* Lightbox styles */
#lightbox {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8);
}

.lightbox-content {
    position: relative;
    top: 50%; /* Set top to 50% of the viewport height */
    transform: translateY(-50%); /* Shift the lightbox up by half its own height */
    margin: auto;
    padding: 10px;
    width: 95%; /* Fill 90% of the browser width */
}
.rounded-img {
    width: 100%;
    border-radius: 15px; /* Rounded corners for images */
    }

.close {
    position: absolute;
    top: 15px;
    right: 25px;
    color: #595959;
    font-size: 16px;
    cursor: pointer;
    background: none; /* Removes the background fill */
    border: none; /* Removes the border */
}

.slide {
    display: none;
}

.slide img {
    width: 100%;
    height: auto; /* Maintain aspect ratio */
    max-height: 90vh; /* Ensure the image does not exceed the viewport height */
}

.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* Button styles */
.toggle-button {
    background-color: #009898; /* Button fill color */
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
}