/* @import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&family=Fredoka+One&family=Galindo&family=Kirang+Haerang&family=Lato:wght@300;400;700&display=swap'); */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Lato', sans-serif;
}

:root {
  --white-color: #ffff;
  --dark-text-color1: #2c2d4a;
  --dark-text-color2: #181826;
  --main-theme-color-dark: #ca4d01;
  --main-theme-color-light: #f7d399;
  --sidepanel-background-color: #333342;
  --sidepanel-active-color: var(--dark-text-color2);
  --sidepanel-hover-color: #2a2a3b;
  --sidepanel-beta-chip-color: var(--main-theme-color-dark);
  --fa-icon-hover-color: var(--dark-text-color2);
  --header-top-fa-icon-hover-color: var(--fa-icon-hover-color);
  --header-top-color: var(--main-theme-color-dark);
  --header-top-text-color: var(--white-color);
  --header-top-bottom-border-color: var(--header-top-color);
  --header-bottom-color: var(--main-theme-color-light);
  --header-bottom-text-color: var(--dark-text-color1);
  --header-bottom-bottom-border-color: var(--header-bottom-color);
  --header-button-color: var(--white-color);
  --assistant-header-top-color: #3a405d;
  --assistant-header-bottom-color: #bbc2e6;
  --form-header-top-color: rgb(14, 64, 80);
  --form-header-chip-color: #eded9c;
  --chat-message-highlight: #f3dcb7;
  --end-chat-cta-hover-color: var(--main-theme-color-light);
  --end-chat-cta-hover-border-color: var(--hint-button-border-color);
  --hint-button-color: #faeacf;
  --hint-button-border-color: var(--main-theme-color-dark);
  --mic-circle-color: var(--main-theme-color-light);
  --mic-icon-color: var(--dark-text-color2);
  --assistant-mic-icon-circle-color: var(--assistant-header-bottom-color);
  --assistant-mic-icon-color: var(--mic-icon-color);
  --beta-chip-color: #3633f6;
  --tooltip-background-color: var(--dark-text-color1);
  --whitelist-row-highlight: rgb(228, 235, 231);
  --table-sorting-header-color: #e3e9ef;
  --table-group-header-color: #edf3f5;
  --learning-design-assistant-message-color: #f7ecda;
  /* --chatbot-bubble-color: #7fd4ff;
  --user-bubble-color: aquamarine; */
  --chatbot-bubble-color: var(--learning-design-assistant-message-color);
  --user-bubble-color: var(--card-color6);
  --card-color0: #f7e1bc; /* default */
  --card-color0-focus: #faca7d;
  --card-color1: #d8e2eb; /* hiring-practice, interview-practice */
  --card-color1-focus: #adcced;
  --card-color2: #caebe3; /* onboarding */
  --card-color2-focus: #7fe3cc;
  --card-color3: #e7d5eb; /* core-skills */
  --card-color3-focus: #e2beeb;
  --card-color4: #e0eacd; /* coaching */
  --card-color4-focus: #d0e9a2;
  --card-color5: #c9d7ff; /* create */
  --card-color5-focus: #a3baf7;
  --card-color6: #caeaff; /* demo-scenario */
  --card-color6-focus: #a0dafe;
  --landing-page-dark-blue-background: #1c1c44;
  --chip-primary: #4a6cfa;
  --chip-primary-light: #e8eeff;
  --chip-gray-light: #f5f5f5;
  --chip-gray-medium: #e0e0e0;
  --chip-gray-dark: #757575;
  --chip-text: #333333;
  --chip-radius: 6px;
  --chip-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  --chip-transition: all 0.2s ease;
  
  /* Modern color palette */
  --primary-50: #eff6ff;
  --primary-100: #dbeafe;
  --primary-200: #bfdbfe;
  --primary-300: #93c5fd;
  --primary-400: #60a5fa;
  --primary-500: #3b82f6;
  --primary-600: #2563eb;
  --primary-700: #1d4ed8;
  --primary-800: #1e40af;
  --primary-900: #1e3a8a;
  
  /* Semantic colors */
  --success-50: #ecfdf5;
  --success-500: #10b981;
  --success-600: #059669;
  --warning-50: #fffbeb;
  --warning-500: #f59e0b;
  --warning-600: #d97706;
  --error-50: #fef2f2;
  --error-500: #ef4444;
  --error-600: #dc2626;
  
  /* Modern neutral grays */
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  
  /* Modern shadows */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  
  /* Modern border radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  
  /* Modern spacing scale */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 0.75rem;
  --spacing-lg: 1rem;
  --spacing-xl: 1.25rem;
  --spacing-2xl: 1.5rem;
  --spacing-3xl: 2rem;
  --spacing-4xl: 2.5rem;
  
  /* Typography improvements */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  
  /* Modern transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 350ms ease;
}


#signupPage.iframe {
  background: #f8faff;
}

.main-theme-color-dark {
  color: var(--main-theme-color-dark) !important;
}
.main-theme-color-light {
  color: var(--main-theme-color-light) !important;
}

.hide {
  display: none !important;
}

.visibility-hidden {
  visibility: hidden;
}

html, body {
    height: 100%;
}

body {
  line-height: normal;
}

nav ol,
nav ul {
  padding-left: 0px;
  margin-bottom: 0px;
}


h1, h2, h3, h4, h5, h6 {
  font-size: revert;
  font-weight: bold;
}

hr {
  border: 0.5px solid var(--dark-text-color2);
  background-color: var(--dark-text-color2);
  color: var(--dark-text-color2);
  margin: 0px
}

.red-font {
  color: red;
}

.red {
  background: red;
  color: red;
}

/* .amber-red {
  background: rgb(211, 83, 24);
} */

.amber {
  background: rgb(236, 156, 43);
  color: rgb(236, 156, 43)
}

.green-font {
  color: rgb(16, 168, 125)
}

.light-green {
  background: rgb(187, 217, 88);
  color: rgb(187, 217, 88)
}

.green {
  background: rgb(16, 168, 125);
  color: rgb(16, 168, 125)
}

ins {
  color: green;
  text-decoration: none;
}

del {
  color: red;
  text-decoration: line-through;
}

.table-value {
  font-weight: bold;
}

.highlight {
  background-color: var(--chat-message-highlight);
}

.highlight-sentence {
  font-weight: bold;
  border-bottom: 2px dotted #3350f6;
}

.casual-underline {
  position: relative;
  display: inline-block;
  cursor: pointer;
  z-index: 1;
}

.casual-underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 2px;
  height: 8px;
  width: 100%;
  z-index: -1;
  transition: transform 0.2s ease;
}

/* Squiggly style */
.squiggly::after {
  background-color: #f4b31b;
  transform-origin: bottom left;
}

.squiggly:hover::after {
  transform: scaleX(1.05);
}

/* Gradient style */
.gradient::after {
  background: linear-gradient(45deg, var(--main-theme-color-light), var(--main-theme-color-dark));
  transform: rotate(-1deg);
}

/* Brush style */
.brush::after {
  background: none;
  height: 10px;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 4' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,2 C20,0 40,4 60,2 C80,0 100,4 100,2' fill='none' stroke='%23f4b31b' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
}

.casual-underline::after {
  z-index: -1;
}

.flash-msg-container {
  color: darkred;
  display: flex;
  justify-content: space-between;
}

.flash-msg-container {
  padding: 10px;
  margin: 10px 0;
  border-radius: 5px;
  position: relative;
}
.flash-msg-container.success {
  background-color: #d4edda;
  color: #155724;
}
.flash-msg-container.error {
  background-color: #f8d7da;
  color: darkred;
}
.flash-msg-container i {
  margin-right: 5px;
}

.flash-msg-container ul {
  margin-bottom: 0px;;
}

.focus-feedback {
  font-weight: bold;
  border: 0.5px solid #dee2e6;
  border-radius: 5px;
  padding: 5px;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 8px 0px, rgba(0, 0, 0, 0.19) 0px 6px 20px 0px;  
}

table.dataTable tbody tr.whitelist-row-highlight {
  background: var(--whitelist-row-highlight);
  font-style: italic;
}


.rehearsable-title {font-family: 'Convergence', sans-serif;
}

.toast-error {
  background-color: var(--main-theme-color-dark) !important;
  color: white !important;
  font-size: 14px !important;
  font-weight: bold !important;
  opacity: 0.9 !important;
}

.toast-warning {
  background-color: #ea8d1c !important;
  color: white !important;
  font-size: 14px !important;
  font-weight: bold !important;
  opacity: 0.9 !important;
}

.toast-info {
  background-color: #2e75da !important;
  color: white !important;
  font-size: 14px !important;
  font-weight: bold !important;
  opacity: 0.9 !important;
}

.toast-success {
  background-color: #4bba9e !important;
  color: white !important;
  font-size: 14px !important;
  font-weight: bold !important;
  opacity: 0.9 !important;
}

.toast-info a {
  text-decoration: underline;
}

.feedback-chart {
  position: relative;
  background-image: none;
  background-size: 100% 100%;
  width: 300px; /* adjust based on your layout */
  height: 300px;
  margin-left: auto;
  margin-right: auto;
  display: none;
}


.plot-area {
  position: absolute;
  width: 63%; /* relative to the chart area size*/
  height: 79%; /* relative to the chart area size*/
  background-color: rgba(173, 49, 49, 0.0); /*semi-transparent white */
  top: 15%; /* absolute position from the top of chart area */
  left: 12%; /* absolute position from the left of chart area */
  box-sizing: border-box;
}

.scatter-point {
  position: absolute;
  width: 10%; /* relative to chart area size */
  height: 10%; /* relative to chart area size */
  border-radius: 50%;
  background-color:rgb(0, 145, 255);
  bottom: 50%; /* absolute position from the top of chart area */
  left: 50%; /* absolute position from the left of chart area */
}

.demo-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
}

.header-tooltip,
.criteria-tooltip {
  border: 1px solid #ccc;
  background-color: #fff;
  padding: 5px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  z-index: 1000;
  white-space: pre-wrap;

}

.header-tooltip {
  position: absolute;
  font-size: 0.8rem;
}

.criteria-tooltip {
  max-width: 35%;
  font-size: 1rem;
  position: fixed;
  font-size: 0.9rem;
  width: min(35%, calc(100vw - 40px));
  overflow-wrap: break-word;
  max-height: calc(100vh - 20px);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#backToTopBtn {
  float: right;
  font-size: 1rem;
  border: none;
  background: none;
  text-decoration: none;
  border-bottom: 1px dotted var(--dark-text-color2);
}

.warning-message {
  display: none;
  background-color: #fff3cd;
  border: 1px solid #ffeeba;
  color: #856404;
  padding: 0.75rem;
  margin-top: 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.875rem;
}

.warning-message.show {
  display: block;
}
textarea.validate-curly-braces {
  background: transparent;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
}
.highlight-overlay {
  background: white;
  z-index: 0;
  box-sizing: border-box;
}
.invalid-brace {
  background-color: #ffd7d7;
  border-radius: 2px;
}
mark.invalid-brace {
  padding: 0px;
}

.ql-container {
  background: white;
  font-size: 1rem;
  width: 100%;
}

.chip-select-container {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--chip-gray-medium);
  border-radius: var(--chip-radius);
  padding: 5px 8px;
  background-color: white;
  cursor: text;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  position: relative;
}

.chip-select-container:focus-within {
  border-color: var(--chip-primary);
  /* box-shadow: 0 0 0 2px rgba(74, 108, 250, 0.15); */
  box-shadow: 0 0 0 2px rgba(255, 85, 0, 0.1);
  outline: none;
}

/* Input field */
.chip-select-input {
  border: none;
  outline: none;
  width: auto;
  flex: 1;
  min-width: 60px;
  height: 28px;
  font-size: 14px;
  padding: 0 4px;
}

/* Selected item chip */
.chip-select-item {
  display: flex;
  align-items: center;
  background-color: var(--chip-primary-light);
  border-radius: calc(var(--chip-radius) - 2px);
  padding: 4px 8px 4px 10px;
  font-size: 14px;
  color: var(--chip-primary);
  transition: var(--chip-transition);
}

/* Close button for chips */
.chip-select-remove {
  margin-left: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--chip-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: pointer;
  line-height: 1;
}

.chip-select-remove:hover {
  background-color: darkslategrey;
  transform: scale(1.1);
}

/* Dropdown menu */
.chip-select-dropdown {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  width: 100%;
  max-height: 250px;
  overflow-y: auto;
  background-color: white;
  border: 1px solid var(--chip-gray-medium);
  border-radius: var(--chip-radius);
  z-index: 1000;
  box-shadow: var(--chip-shadow);
  display: none;
}

.chip-select-dropdown.show {
  display: block;
}

/* Option items */
.chip-select-option {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
  transition: var(--chip-transition);
}

.chip-select-option:hover {
  background-color: var(--chip-gray-light);
}

.chip-select-option.selected {
  background-color: var(--chip-primary-light);
  color: var(--chip-primary);
}

/* No results message */
.chip-select-no-results {
  padding: 12px;
  text-align: center;
  color: var(--chip-gray-dark);
  font-size: 14px;
  font-style: italic;
}

/*****************************************************************************/
/***************************** LANDING PAGE SETTINGS *************************/
/*****************************************************************************/

.inherit-all {
  all: inherit;
}

.scroll-container {
  overflow: hidden;
  background: var(--main-theme-color-dark);
  color: white;
  white-space: nowrap;
  padding: 10px 0;
}

.scroll-text {
  display: inline-block;
  animation: scroll 23s linear infinite;
}

.text-item {
  display: inline-block;
  padding: 0 30px;
  font-size: 1.5rem;
  font-weight: bold;
}

@keyframes scroll {
  0% {
      transform: translate(0, 0);
  }
  100% {
      transform: translate(-50%, 0);
  }
}

#privacyPage .landing-header .title-top,
#termsPage .landing-header .title-top {
  align-items: center;
  display: flex;
}

#signupPage hr {
  border: 0.5px solid #c9c9e4;
}


#homePage .home-header-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

#homePage .home-header-top h3 {
  margin-top: 30px;
}

#homePage .home-header-top .attribution-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #181826;
  width: max-content;
}

#homePage .view-as-container {
  padding: 10px 15px 10px 20px;
  background-color: black;
  border-bottom: 1px solid black;
  margin: -15px -15px 10px -15px;
  color: white;
  display: flex;
}

#homePage .view-as-form {
  display: flex;
  align-items: center;
  gap: 10px;
}

#homePage .view-as-form select {
  padding: 5px 10px;
  border: 1px solid #ced4da;
  border-radius: 4px;
}

#homePage .view-as-close {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  padding: 4px;
  font-size: 16px;
  transition: color 0.2s ease;
  margin-left: auto;
}

#homePage .view-as-toggle {
  background: none;
  border: none;
  padding: 0px;
}

#homePage.view-as-toggle i {
  cursor: pointer;
  transition: all 0.2s ease;
}

#homePage.view-as-toggle i:hover {
  background-color: #e9ecef;
}

#homePage.view-as-toggle i.active {
  background-color: #e9ecef;
}

#chatPage.iframe-container .chat-container {
  box-shadow: none;
}

#chatPage .notes-container .attribution-title {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #181826;
}


#chatPage .notes-container .attribution-title div {
  margin: 3px;
  border-radius: 5px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 3px 3.5% 5px 3.5%;
  padding: 0.5%;
  font-size: 0.9rem;
  background: #f7f5f2;
  text-align: center;
}

#chatPage .notes-container .attribution-title div:hover {
  background: #f8f1e6;
  cursor: pointer;
}

#chatPage .notes-container .attribution-title div a {
  text-decoration: none;
  color: #181826;
}

#chatPage .notes-container .attribution-title p {
  font-style: italic;
}

#chatPage .notes-container .attribution-title .rehearsable-title {
  font-family: 'Convergence', sans-serif;
}

#chatPage .notes-container .attribution-title img {
  width: 20px;
  vertical-align: bottom;
}

#homePage .home-header-top .attribution-title a {
  text-decoration: none;
  color: #181826;
  border-bottom: 1px dotted #181826;
}

#homePage .home-header-top .attribution-title p {
  font-style: italic;
}

#homePage .home-header-top .rehearsable-title {
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  margin: 5px
}

#homePage .home-header-top .rehearsable-title span {
  font-family: 'Convergence', sans-serif;
  margin-right: 4px;
}

#homePage .home-header-top .rehearsable-title img {
  width: 30px;
  height: auto;
}

#homePage .home-header .book-demo button {
  font-size: 1.1rem !important;
  margin-left: 10px !important;
  font-weight: bold !important;
  font-size: 1.1rem !important;
  align-self: flex-start !important;
  border-radius: 25px !important;
  padding: 7px 20px !important;
  height: fit-content !important;
  line-height: 1.5 !important;
  width: max-content !important;
  text-align: center !important;
  border: solid 0.5px var(--main-theme-color-dark) !important;
  background: var(--main-theme-color-dark) !important;
  color: white !important;
}

/*****************************************************************************/
/************************ SIGNUP AND LOGIN PAGE SETTINGS *********************/
/*****************************************************************************/


#signupPage .signup {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-items: center;
  margin-top: auto;
  margin-bottom: auto;
  overflow: hidden;
}

#signupPage .signup p {
  color: var(--dark-text-color2);
}

#signupPage .signup p span {
  font-family: 'Convergence', sans-serif;
}

#signupPage .signup-title {
  font-size: 5rem;
  margin: 20px;
  font-weight: 500;
}

#signupPage .signup-title.small {
  font-size: 2rem;
}

#signupPage .free-message {
  margin-bottom: 10px;
}

#signupPage .signup-options {
  margin-left: auto;
  margin-right: auto;
}

#signupPage .signup-message {
  margin: 30px;
  color: var(--dark-text-color1);
  text-align: center;
}

#signupPage .signup-options .google-signup,
#signupPage .signup-options .azure-signup,
#signupPage .signup-options .local-signup,
#signupPage .signup-options .enterprise-sso {
  border-radius: 2px;
  background: white;
  border: 0.5px solid grey;
  height: 40px;
  display: flex;
  align-items: center;
  margin: 15px;
  text-decoration: none;
  width: 230px;
}

#signupPage .signup-options .enterprise-sso .signup-button i {
  margin-right: 10px;
  font-size: 18px;
  color: #5c5959
}

#signupPage .signup-options .enterprise-sso .signup-button i:hover {
  color: #5c5959
}

.signup-button {
  display: flex;
  align-items: center;
}

.signup-button span {
  text-decoration: none;
  border-bottom: none;
  color: black;
}

#signupPage .fs-div#submit,
#signupPage .signup-button a {
  display: flex;
  align-items: center;
  justify-items: flex-start;
  text-decoration: none;
  color: var(--dark-text-color2);
  margin-left: auto;
  margin-right: auto;
}

#signupPage .fs-div#submit input {
  background: white;
  border: none;
  font-size: 1rem;
  color: var(--dark-text-color2);
  margin-left: auto;
  margin-right: auto;
  border-radius: 2px;
  background: white;
  border: 0.5px solid grey;
  height: 40px;
  width: max-content;
  padding: 0px 20px;
  align-items: center;
}

.fs-div input {
  border: 0.5px solid black;
  padding: 3px;
  border-radius: 3px;}

  .fs-div input:read-only:not([type="submit"]):not([id="remember"]) {
    background-color: #f2f2f2;
    pointer-events: none;
  }

.fs-div .form-group-indicator,
.fs-div .form-group-info {
  margin-left: 3px;
}

.fs-div .requirements-container {
  margin: 10px 0px;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 4px;
  background-color: #f9f9f9;
  display: none;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.fs-div .requirements-container.visible {
  display: block;
}

.fs-div .requirement {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 5px 0;
  font-size: 14px;
  color: #666;
}

.fs-div .indicator {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #ccc;
  display: inline-block;
  position: relative;
}

.fs-div .indicator.valid {
  background-color: rgb(16, 168, 125)
}

.fs-div .indicator.valid::after {
  content: "✓";
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
}

/* https://github.com/Flask-Middleware/flask-security/blob/528d9a65b9722346f114f4d96ce7e1bbb6d97a96/flask_security/templates/security/base.html#L21 */
.fs-center { text-align: center }
.fs-important { font-size: larger; font-weight: bold }
.fs-gap { margin-top: 20px; }
.fs-div { margin: 4px; }
.fs-error-msg {
  color: darkred;
  width: fit-content;
  margin-left: auto;
  margin-right: auto
}

.fs-div .form-text {
  color: #212529bf;
  margin-top: 0.25rem;
  font-size: 0.875em
}

.fs-div-field {
  display: flex;
  justify-content: center;
}

.fs-div-field input {
  margin-left: 3px;
}

.signup a span {
  text-decoration: none;
}

#signupPage .local-signup {
  align-items: center;
  justify-content: center;
}

#signupPage .local-signup .signup-button {
  height: fit-content;
  padding: 3px;
  flex-direction: column;
}

.context-text {
  font-style: italic;
  font-size: 0.7rem;
  padding-top: 2px
}

.grey {
  color: rgb(165, 165, 168);
}

.dark-orange {
  color: var(--main-theme-color-dark);
}

.signup-button .sso-icon,
.signup-button img {
  max-width: 48px;
  width: 18px;
  margin: 0px 12px;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}
 
#signupPage .signup-button p {
  margin-right: 12px;
  margin: 0px 12px 0px 0px;
  color: var(--dark-text-color2);
}


#signupPage .signup-gap {
  width: 230px;
  margin-left: auto;
  margin-right: auto;
}

#signupPage .fs-div label {
  color: var(--dark-text-color2)
}

@media screen and (max-width: 768px) {
  #signupPage .signup-title {
    font-size: 4rem;
    margin: 15px;
    font-weight: 500;
  }

  #signupPage .signup-message {
    font-size: 0.8rem;

}
}

@media screen and (max-width: 400px) {
#signupPage .signup-message {
  position: relative;
  margin: 30px;
  color: var(--dark-text-color1);
  text-align: center;
}
}


/*****************************************************************************/
/***************************** ERROR PAGE SETTINGS *************************/
/*****************************************************************************/

#errorPage {
  background-image: linear-gradient(to bottom right, #DFE9EB, #FFD7C2);
  margin: 0% 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

#errorPage .error-icon img {
  height: 200px;
}

.error-title .error-detail,
.error-title .error-desc,
.error-title .error-code,
.error-title .error-reason {
  text-align: center;
  margin: auto;
  font-size: 100%;
  font-weight: bold;
  color: var(--dark-text-color2);
}

.error-title .error-code {
  font-size: 400%;
}

.error-title .error-detail {
  font-weight: normal;
}

/*****************************************************************************/
/***************************** HOMEPAGE SETTINGS *****************************/
/*****************************************************************************/

#homePage {
  background: #f7f5f2;
  display: flex;
}

.home-header.analyse {
  display: flex;
  justify-content: space-between;
}

.home-header.analyse .navigation {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.home-header.analyse .navigation a {
  text-decoration: none;
  color: var(--dark-text-color2);
  font-weight: bold;
  padding: 3px;
}

#homePage .nav-container-footer,
.nav-container {
  flex: 1;
  border-radius: 0px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--sidepanel-background-color);
  font-size: 0.9rem;
}

#homePage .nav-container-footer {
  display: none;
}

.nav-container .trial-chip {
  background-color: #e8e3f4;
  color: var(--dark-text-color1);
  border: 2px solid rgb(169, 88, 223);
  font-weight: bold;
  text-align: center;
  margin: 5px;
  padding: 5px 10px;
  border-radius: 10px;
  font-size: 1.1rem;
}

.nav-container h4 {
  margin-bottom: 0px;
  font-weight: bold;
}

.nav-container li,
.nav-container-footer li{
  list-style: none;
}

.nav-controls,
.nav-info {
  flex: 2;
}

.nav-controls .profile-icon img {
  height: 17px;
  vertical-align: sub;
}

.nav-controls i,
.nav-actions i {
  padding: 0px 5px 0px 0px;
  width: 20px;
}

.dropdown {
  position: relative;
}

.dropdown-content {
  display: none; /* Hidden by default, shown via JS */
  background-color: var(--sidepanel-background-color); 
  min-width: 160px;
  z-index: 3; /* Ensure it appears above other content */
}

.nav-content h4 {
  padding: 6px 16px;
  color: #bebecf;
  font-size: 1rem !important
}

.nav-content {
  flex: 9;
  overflow: auto;
  max-height: 100%;
}

.nav-info a {
  margin-top: auto;
}

.nav-info a i {
  padding-left: 5px;
}

.nav-actions {
  flex: 1;
}

/* Sidebar links */
#homePage .nav-container-footer a,
.nav-container a,
.dropdown button,
.nav-container a button {
  display: block;
  color: white;
  padding: 6px 16px;
  text-decoration: none;
  background: none;
  border: none;
  font-size: 15px;
}

.nav-container .dropdown-content a {
  padding: 6px 16px;
}

.nav-container a button {
  padding: 0px;
  text-align: left;
}

/* Active/current link */
#homePage .nav-container-footer a.active,
.nav-container a.active {
  background-color: var(--sidepanel-active-color);
  color: white;
}

/* Links on mouse-over */
#homePage .nav-container-footer a:hover:not(.active),
.nav-container a:hover:not(.active) {
  background-color: var(--sidepanel-hover-color);
  color: white;
}

.nav-content a {
  font-size: 0.8rem;
  padding: 6px 30px;
  color: #dadae5
}

#homePage .home-header .book-demo {
  display: flex;
  border: solid 0.5px #fbe8be;
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0px 3px 6px #7788a0;
  background: #fbe8be;
  font-size: 1.1rem;
  align-items: center;
  justify-content: space-between;
}

/* On screens that are less than 768px wide, make the sidebar into a topbar */
@media screen and (max-width: 768px) {
  #homePage {
    flex-direction: column;
  }

  .home-header.analyse {
    display: flex;
    flex-direction: column;
  }
  
  .home-header.analyse .navigation {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
  }
  
  
  #homePage .nav-container,
  #homePage .nav-container-footer {
    width: 100%;
    height: auto;
    position: relative;
    flex: 0 1 auto;
    align-items: center;
    justify-items: center;
  }
  #homePage .nav-container .nav-controls {
    display: flex;
    align-items: center;
  }

  .dropdown-content {
    display: none !important; /* Force hiding dropdown content on small screens */
  }

  .home-header.analyse .navigation {
    display: none;
  }

  #homePage .nav-container .nav-content,
  #homePage .nav-container .nav-info,
  #homePage .nav-container .nav-actions {
    display: none;}

  #homePage .nav-container-footer {
    display: flex;
    flex: 0 1 auto;
  }

  #homePage .nav-container-footer .nav-info,
  #homePage .nav-container-footer .nav-actions {
    display: flex;
  }

  #homePage .nav-container-footer .nav-info ul {
    display: flex;
    flex: 2;
  }

  #homePage .nav-container a,
  #homePage .nav-container-footer a {
    float: left;
    padding: 6px 8px;
    text-align: center;
  }

  #homePage .home-container {
    padding: 0px 15px 0px 15px;
  }
}

.design-container,
.home-container {
  position: relative;
  flex: 5;
  height: 100%;
  /* background: var(--white-color); */
  color: var(--dark-text-color2);
  padding: 15px 15px 15px 15px;
  overflow: auto;
}

.home-title {
  display: flex;
  align-items: center;
}

#homePage .home-header-top .home-title img {
  flex: 1;
  height: auto;
  max-width: 10%;
}

.home-title img {
  flex: 1;
  height: auto;
  max-width: 10%;;
}

.home-title h1, .home-title h2 {
  color: var(--dark-text-color2);
  margin: 0px 0px 0px 20px;
  font-family: 'Convergence', sans-serif;}

.home-title h2 {
  color: var(--main-theme-color-dark); /* Orange */
}


/* scenario cards - grid format */
.sit-cards {
  margin: 10px 0px 0px 0px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* max-width: 30em; */
}

/* scenario cards - images for each scenario */
.sit-cards li .sit-icon {
  flex: 1 1 0%;
}

.sit-cards li .sit-icon img {
  height: 100px;
  border-radius: 10px 0px 0px 10px;
}

/* scenario cards - info for each scenario */
.sit-cards li .sit-info {
  flex: 7 1 0%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-items: center;
}

.sit-cards li {
  list-style: none;
  margin: 0.5em 0.5em;
  background: var(--card-color0);
  position: relative;
  transition: 400ms;
  border-radius: 10px;
  overflow: hidden;
}

.sit-cards a.clickable-card {
  color: inherit;
  text-decoration: none;
  display: flex;
  height: 100px;
  width: 100%;
}

.sit-cards .interview-practice,
.sit-cards .hiring-practice  {
  background: var(--card-color1);
}

.sit-cards .onboarding  {
  background: var(--card-color2);
}

.sit-cards .core-skills  {
  background: var(--card-color3);
}

.sit-cards .coaching  {
  background: var(--card-color4);
}

.sit-cards .create  {
  background: var(--card-color5);
}

.sit-cards .demo-scenario  {
  background: var(--card-color6);
}

.sit-cards li:hover,
.sit-cards li:focus-within {
  box-shadow: 0px 3px 6px #000;
}

.sit-cards li:hover a.clickable-card,
.sit-cards li:focus-within a.clickable-card,
.sit-cards a.clickable-card:focus {
  background: var(--card-color0-focus);
}

.sit-cards .interview-practice:hover a.clickable-card,
.sit-cards .interview-practice:focus-within a.clickable-card,
.sit-cards .interview-practice a.clickable-card:focus,
.sit-cards .hiring-practice:hover a.clickable-card,
.sit-cards .hiring-practice:focus-within a.clickable-card,
.sit-cards .hiring-practice a.clickable-card:focus {
  background: var(--card-color1-focus);
}

.sit-cards .onboarding:hover a.clickable-card,
.sit-cards .onboarding:focus-within a.clickable-card,
.sit-cards .onboarding a.clickable-card:focus {
  background: var(--card-color2-focus);
}

.sit-cards .core-skills:hover a.clickable-card,
.sit-cards .core-skills:focus-within a.clickable-card,
.sit-cards .core-skills a.clickable-card:focus {
  background: var(--card-color3-focus);
}

.sit-cards .coaching:hover a.clickable-card,
.sit-cards .coaching:focus-within a.clickable-card,
.sit-cards .coaching a.clickable-card:focus {
  background: var(--card-color4-focus);
}

.sit-cards .create:hover a.clickable-card,
.sit-cards .create:focus-within a.clickable-card,
.sit-cards .create a.clickable-card:focus {
  background: var(--card-color5-focus);
}

.sit-cards .demo-scenario:hover a.clickable-card,
.sit-cards .demo-scenario:focus-within a.clickable-card,
.sit-cards .demo-scenario a.clickable-card:focus {
  background: var(--card-color6-focus);
}


.sit-info h5 {
  /* font-family: 'Galindo', sans-serif; */
  font-weight: 900;
  font-size: 1.0rem;}

.sit-info p {
  font-size: 0.85rem;
}

/* Filtering */

/* Style the buttons */
.btn {
  border: none;
  outline: none;
  padding: 12px 16px;
  margin: 10px 5px 0px 5px;
  background-color: #f1f1f1;
  cursor: pointer;
  border-radius: 5px;
}

/* Add a light grey background on mouse-over */
.btn:hover {
  background-color: #ddd;
}

/* Add a dark background to the active button */
.btn.active {
  background-color: var(--dark-text-color2);
  color: white;
}

/* .demo-scenarios-container {
  padding: 20px;
  background: #f5f5f6;
  border: solid 0.5px var(--dark-text-color1);
  box-shadow: 0 4px 8px 0 var(--dark-text-color1);
  border-radius: 10px;
} */

.partner-scenarios-header {
  margin-top: 15px;
}

.user-create-container h2 .beta,
.title-container .demo,
.title-container .readonly-chip,
.title-container .assistant-chip,
.demo-scenario .demo {
  font-size: 0.7rem;
  background: var(--beta-chip-color);
  color: white;
  padding: 3px 5px;
  border-radius: 5px;
  width: fit-content;
  font-weight: bold;
  margin: 3px 0px;
}


.user-create-container h2 {
  display: flex;
}

.user-create-container h2 .beta {
  font-size: 1rem;
  margin-left: 7px;
  padding: 3px 7px;
  background: var(--beta-chip-color);
}

.title-container .readonly-chip,
.title-container .assistant-chip,
.title-container .demo {
  font-size: 0.9rem;
  background:rgb(21, 46, 111);
  margin-left: 10px;
  height: fit-content;
}

.title-container .readonly-chip {
  background: #4360dd;
  z-index: 3;
}

.title-container .assistant-chip {
  background: #246b9a;
}

#toggleDemoContent {
  margin-left: 5px;
}

@media screen and (max-width: 768px) {
  .home-title img {
    max-width: 15%;
    height: auto;
  }

  .home-title h1, .home-title h2 {
    margin: 8px;
  }

  .sit-cards {
    grid-template-columns: 1fr;
  }

  .sit-cards li {
    height: auto;
  }
}

@media screen and (max-width: 400px) {
#homePage .home-header-top {
  flex-direction: column;
  text-align: center;
}

#homePage .home-header-top .attribution-title {
  width: 100%;
  margin-top: 10px;
}

#homePage .home-header-top .home-title img {
  max-width: 30% !important;
}
}


/*****************************************************************************/
/***************************** ACCOUNT PAGE SETTINGS ****************************/
/*****************************************************************************/

table {border-collapse: separate;
      border-spacing: 0 15px}

td {border: none;
    padding: 0 10px}

td .row-btns {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

tr:nth-child(even) {
  background-color: #e9edf3;
}
#assistantThreadTable th,
#previousConvTable th,
#aggregatedLearnerHoursTable th {
  background: var(--table-group-header-color);
  color: var(--dark-text-color2);
}

#assistantThreadTable th.sorting,
#previousConvTable th.sorting,
#aggregatedLearnerHoursTable th.sorting {
  background: var(--table-sorting-header-color);
  color: var(--dark-text-color2);
}

#assistantThreadTable td a,
#previousConvTable td a {
  color: var(--dark-text-color2);
  text-decoration: none;
  border-bottom: 1px dotted var(--dark-text-color2);
}

.default-character-text {
  color: rgb(192, 190, 190);
}

/*****************************************************************************/
/***************************** MANAGE PAGE SETTINGS ****************************/
/*****************************************************************************/

.manage-container {
  display: flex;
  flex-direction: column;
}

.manage-container #manageBtn {
  align-self: flex-start;
  margin: 5px 0px;
  font-weight: bold;
}

.manage-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 7px;
}

.manage-header h2 {
  font-weight: bold
}

.manage-header .manage-btns {
  align-self: center;
}

.table-note ul {
  padding-left: 20px
}

/* Side Navigation Panel */
.form-nav-container {
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg) var(--spacing-sm);
  box-shadow: var(--shadow-lg);
  z-index: 1;
  width: 60px;
  transition: all var(--transition-normal);
  align-self: flex-start;
  flex-shrink: 0;
}

.form-nav-container a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  color: var(--gray-600);
  text-decoration: none;
  transition: all var(--transition-fast);
  position: relative;
  background: transparent;
}

.form-nav-container a:hover {
  background: var(--primary-50);
  color: var(--primary-600);
  transform: translateX(2px);
}

.form-nav-container a.active {
  background: var(--primary-500);
  color: white;
  box-shadow: var(--shadow-md);
}

.form-nav-container a.active:hover {
  background: var(--primary-600);
  color: white;
}

.form-nav-container a i {
  font-size: 1.2rem;
}

/* Tooltip on hover */
.form-nav-container a::after {
  content: attr(data-title);
  position: absolute;
  left: 60px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--gray-900);
  color: white;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-fast);
  pointer-events: none;
  z-index: 101;
}

.form-nav-container a::before {
  content: '';
  position: absolute;
  left: 52px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 8px solid var(--gray-900);
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-fast);
  z-index: 101;
}

.form-nav-container a:hover::after,
.form-nav-container a:hover::before {
  opacity: 1;
  visibility: visible;
}

/* Adjust form container layout */
.home-container .form-container {
  display: flex;
  gap: var(--spacing-lg);
  align-items: flex-start;
}

.form-body {
  flex: 1;
  min-width: 0; /* Allows flex item to shrink below content size */
}

/* Hide on mobile */
@media (max-width: 1024px) {
  .form-nav-container {
    display: none;
  }
}

.input-wrapper {
  display: flex;
}

.fixed-prefix {
  font-size: 0.9rem;
  padding-right: 2px;
  padding-top: 4px
}

.home-body .fa-pencil,
.home-body .fa-comment,
.home-body .fa-comments,
.home-body .fa-copy {
  color: var(--main-theme-color-dark);
}

table.dataTable {
  width: 100% !important;
}

table.dataTable thead>tr>th {
  text-transform: uppercase;
  font-size: 0.8rem;
}

table tbody tr {
  cursor: pointer;
}

table tbody tr:hover {
  background-color: #ffffff 
}


table.dataTable tbody .selected-row {
  background: #f8faff
}

#componentsTable tbody > tr.selected td {
  box-shadow: inset 0 0 0 999px var(--main-theme-color-light) !important;
  color: var(--dark-text-color2)
}

#partnerComponentsTable td,
#componentsTable td {
  white-space: pre-line;
}

#componentModal .form-control {
  border: 0.5px solid rgb(211, 212, 218);
  border-radius: 3px;
}

#inviteModal .header,
#componentModal .header,
#customiseModal .header {
  display: flex;
}

#closeCustomise {
  font-size: 1.2rem;
  font-weight: normal;
}

#customiseModal .header {
  justify-content: space-between;
}

.table-tips {
  display: flex;
  flex-direction: column;
  color: grey;
  padding: 0px 20px;
  font-style: italic;
}

#callToActionTable thead th.ui-state-default:first-child {
  border-left-width: 0px;
}

#callToActionTable_wrapper .dataTables_paginate .fg-button {
  color: initial;
}


.manage-btns .column-selector-wrapper {
  position: relative;
  display: inline-block;
  margin-left: 15px;
}

.manage-btns .column-selector-btn {
  background: #f5f5f5;
  border: 1px solid #ddd;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.875rem;
  transition: all 0.2s ease;
}

.manage-btns .column-selector-btn:hover {
  background: #ffffff;
  border-color: #a2a2a2e6;
}

.manage-btns .column-selector-btn i {
  margin-right: 5px;
}

.manage-btns .column-selector-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  min-width: 250px;
  z-index: 1000;
  display: none;
  max-height: 400px;
  overflow-y: auto;
}

.manage-btns .column-selector-dropdown.active {
  display: block;
}

.manage-btns .column-selector-header {
  padding: 12px 16px;
  background: #fafafa;
  border-bottom: 1px solid #e0e0e0;
  font-weight: 600;
  font-size: 0.875rem;
  color: #424242;
  position: sticky;
  top: 0;
  z-index: 10;
}

.manage-btns .column-selector-item {
  padding: 10px 16px;
  border-bottom: 1px solid #f5f5f5;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: background 0.2s ease;
}

.manage-btns .column-selector-item:last-child {
  border-bottom: none;
}

.manage-btns .column-selector-item:hover {
  background: #f5f5f5;
}

.manage-btns .column-selector-item input[type="checkbox"] {
  margin-right: 10px;
  cursor: pointer;
}

.manage-btns .column-selector-item label {
  cursor: pointer;
  font-size: 0.875rem;
  flex: 1;
  margin: 0;
}

  /* User groups badge styles */
  table .user-groups-badge {
    display: inline-block;
    background: #f3e5f5;
    color: #7b1fa2;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 0.875rem;
    font-weight: 500;
  }

  /* Scenario type badges */
  table .criteria-type-badge,
  table .scenario-type-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    width: max-content;
  }

  /* .scenario-type-badge.role-play {
    background: #f7ebd8;
    color: #ca4d01;
  }

  .scenario-type-badge.coaching {
    background: #f4f3dc;
    color: #6c6a1a;
  }

  .scenario-type-badge.scenario-select {
    background: #fff3e0;
    color: #ef6c00;
  }

  .scenario-type-badge.audio-question {
    background: #e5e5e9;
    color: #756f83;
  }

  .scenario-type-badge.assistant {
    background: #e3f2fd;
    color: #1565c0;
  }

  .scenario-type-badge.questions {
    background: #fce4ec;
    color: #c2185b;
  } */

  /* Click outside to close dropdown */
  table .scenario-count-wrapper {
    position: relative;
    display: inline-block;
  }

  /* Visibility dropdown styling */
  table .visibility-dropdown {
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid #ddd;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  table .visibility-dropdown:hover {
    border-color: #a2a2a2e6;
  }

  table .visibility-dropdown.VISIBLE {
    background-color: #e8f5e9;
    color: rgb(16, 168, 125)
  }

  table .visibility-dropdown.HIDDEN {
    background-color: #f5f5f5;
    color: #666;
  }

  table .visibility-dropdown:disabled {
    cursor: not-allowed;
    opacity: 0.6;
  }

  /* Expandable count badge styles */
  table .entity-count-badge {
    display: inline-block;
    background: var(--card-color0);
    color: var(--dark-text-color1);
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    margin-left: 4px;
  }

  table .entity-count-badge:hover {
    background: var(--card-color1);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }

  table .entity-items-display {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
  }

  table .entity-item {
    display: inline-block;
    background: #eceff8;
    color: #333;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 500;
  }

  table .entity-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: auto;
    right: 0;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    min-width: 300px;
    max-width: 400px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
  }

  table .entity-dropdown.active {
    display: block;
  }

  table .entity-dropdown-item {
    padding: 8px 12px;
    border-bottom: 1px solid #f5f5f5;
    font-size: 0.875rem;
    transition: background 0.2s ease;
  }

  table .entity-dropdown-item:last-child {
    border-bottom: none;
  }

  table .entity-dropdown-item:hover {
    background: #f5f5f5;
  }

  table .entity-dropdown-header {
    padding: 12px;
    background: #fafafa;
    border-bottom: 1px solid #e0e0e0;
    font-weight: 600;
    font-size: 0.875rem;
    color: #424242;
    position: sticky;
    top: 0;
    z-index: 10;
  }

  /* Actions dropdown styles */
  table .actions-dropdown-wrapper {
    position: relative;
    display: inline-block;
  }

  table .actions-ellipsis-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 4px;
    transition: all 0.2s ease;
    color: #666;
    font-size: 1rem;
  }

  table .actions-ellipsis-btn:hover {
    background: #f5f5f5;
    color: #333;
  }

  table .actions-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    min-width: 180px;
    z-index: 1000;
    display: none;
    width: max-content;
  }

  table .actions-dropdown.active {
    display: block;
  }

  table .actions-dropdown-header {
    padding: 12px;
    background: #fafafa;
    border-bottom: 1px solid #e0e0e0;
    font-weight: 600;
    font-size: 0.875rem;
    color: #424242;
    position: sticky;
    top: 0;
    z-index: 10;
  }

  table .actions-dropdown-item {
    display: block;
    padding: 10px 12px;
    text-decoration: none;
    color: #333;
    font-size: 0.875rem;
    transition: background 0.2s ease;
    border-bottom: 1px solid #f5f5f5;
  }

  table .actions-dropdown-item:last-child {
    border-bottom: none;
  }

  table .actions-dropdown-item:hover {
    background: #f5f5f5;
    color: #333;
    text-decoration: none;
  }

  table .actions-dropdown-item i {
    margin-right: 8px;
    width: 16px;
    text-align: center;
  }

  table .entity-count-wrapper {
    position: relative;
    display: inline-block;
  }

/* Filter chip styles */
.filter-chip {
  display: inline-flex;
  align-items: center;
  background-color: var(--chip-primary-light);
  color: var(--chip-primary);
  border-radius: var(--chip-radius);
  padding: 4px 8px 4px 12px;
  margin-left: 10px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid var(--chip-primary);
  transition: var(--chip-transition);
}

.filter-chip .filter-label {
  margin-right: 8px;
}

.filter-chip .filter-remove {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--chip-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: pointer;
  line-height: 1;
  transition: var(--chip-transition);
}

.filter-chip .filter-remove:hover {
  background-color: #333;
  transform: scale(1.1);
}

.filter-chip:hover {
  background-color: rgba(74, 108, 250, 0.15);
}

/***************************** USAGE DASHBOARD ****************************/


.usage-dashboard {
  min-height: calc(100vh - 100px);
  padding: 2rem 0;
}

.learner-conversations .dashboard-header,
.usage-dashboard .dashboard-header {
  background: white;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  margin-bottom: 2rem;
}

.learner-conversations .selector-container,
.usage-dashboard .period-selector {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}

.learner-conversations .selector-container {
  justify-content: space-between;
  width: 100%;
}

.learner-conversations .selector-container select,
.learner-conversations .selector-container input,
.usage-dashboard .period-selector select, .period-selector input {
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  background-color: var(--white-color, white);
  color: var(--dark-text-color1, #333);
}

.usage-dashboard .summary-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.usage-dashboard .summary-card {
  background: white;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.usage-dashboard .summary-card h3 {
  color: var(--dark-text-color1);
  font-size: 14px;
  font-weight: normal;
  margin: 0 0 0.5rem 0;
}

.usage-dashboard .summary-card .value {
  font-size: 32px;
  font-weight: bold;
  color: var(--dark-text-color1);
  margin: 0;
}

.usage-dashboard .summary-card .subtext {
  font-size: 14px;
  color: #999;
  margin-top: 0.25rem;
}

.usage-dashboard .summary-card.highlight {
  background: var(--main-theme-color-dark);
  color: white;
}

.usage-dashboard .summary-card.highlight h3 {
  color: rgba(255,255,255,0.8);
}

.usage-dashboard .summary-card.highlight .value {
  color: white;
}

.usage-dashboard .summary-card.highlight .subtext {
  color: white;
}

.usage-dashboard .summary-card h3 i {
  font-size: 12px;
  color: #999;
  margin-left: 5px;
  cursor: help;
}

.usage-dashboard .summary-card.highlight h3 i {
  color: rgba(255,255,255,0.7);
}

.usage-dashboard .usage-section {
  background: white;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  margin-bottom: 2rem;
}

.manage-header .section-header,
.usage-dashboard .section-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.usage-dashboard .section-header h2 {
  margin: 0;
  font-size: 20px;
  color: var(--dark-text-color1);
}

.manage-header .section-header .form-group-title,
.learner-conversations .section-header .form-group-title,
.usage-dashboard .section-header .form-group-title {
  align-items: center;
}

.usage-dashboard .user-group-item {
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  margin-bottom: 1rem;
  overflow: hidden;
}

.usage-dashboard .user-group-header {
  padding: 1rem;
  background: #f8f9fa;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.usage-dashboard .user-group-header:hover {
  background: #f0f0f0;
}

.usage-dashboard .user-group-details {
  padding: 1rem;
  border-top: 1px solid #e0e0e0;
  display: none;
}

.usage-dashboard .user-group-details.show {
  display: block;
}

.usage-dashboard .usage-chart-container {
  height: 300px;
  margin-bottom: 2rem;
}

.learner-conversations .btn-primary,
.usage-dashboard .btn-primary {
  background: var(--main-theme-color-dark);
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}


.usage-dashboard .btn-primary:hover {
  background: var(--main-theme-color-dark);
}

.usage-dashboard .date-inputs {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.usage-dashboard .metric-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background: var(--card-color0);
  border-radius: 4px;
  font-size: 14px;
  margin-right: 1rem;
  margin-left: 1rem;
}

.usage-dashboard .cost-badge {
  /* background: var(--card-color0); */
  color: var(--main-theme-color-dark);
  font-weight: bold;
}

.usage-dashboard .table {
  border-collapse: collapse;
  width: 100%;
}

.usage-dashboard .table th {
  background-color: #f8f9fa;
  border-bottom: 2px solid #dee2e6;
  padding: 0.75rem;
  text-align: left;
  font-weight: 600;
}

.usage-dashboard .table td {
  border-bottom: 1px solid #dee2e6;
  background-color: white;
  padding: 0.75rem;
}

.usage-dashboard .table tbody tr:hover {
  background-color: initial;
}



/***************************** ADD USERS SETTINGS ****************************/

#engagementTable th .form-group-info,
#userGroupsTable th .form-group-info {
  align-self: center;
}

/* .manage #inviteModal {
  display: flex;
  flex-direction: column;
} */

/* .customise-scenario-form, */
.email-form {
  display: flex;
  flex-direction: column;
}

#scenarioSelect,
#emailContainer {
  width: 100%;
}

#emailContainer .form-group-title,
#emailContainer .form-group {
  margin: 2px;
}

#emailContainer .form-group .form-text {
  margin: 4px;
}


#emailInput {
  width: 100%;
  text-align: start;
  padding: 10px;
  border: solid 0.5px #b2bbc3;
  display: none;
  margin-top: 8px;
}

#sendEmailInvite {
  display: none;
}


#validEmails, #invalidEmails {
  display: flex;
  flex-wrap: wrap;
}

#emailContainer span {
  margin: 3px;
  padding: 3px;
  border-radius: 5px;
}

#emailContainer span.valid {
  border: solid 0.5px green;
  background-color: rgb(218, 246, 218);
}

#emailContainer span.invalid {
  border: solid 0.5px rgb(248, 23, 23);
  background-color: rgb(246, 225, 225);
}

.email-validation {
  margin: 10px 0px;
}

.valid-email-header, invalid-email-header {
  margin: 5px 0px;
}

#generateImageBtn,
#saveImageBtn,
#creatorOnboardingSubmitBtn,
#generateEmbeddingBtn,
#regenerateEmbeddingBtn,
#startConvBtn,
#startNewWizardBtn,
.wizard-container #createCharacterGroupBtn,
.wizard-container #createFeedbackGroupBtn,
.wizard-container #addCharacterBtn,
.wizard-container #addCriteriaBtn,
#goToDesignerBtn,
#teachableDemoBtn,
#startNewScenarioBtn,
.book-demo button,
#demoCTABtn,
#goToScenarioDesignerBtn,
#copyInviteLinkBtn,
#copyEmbedBtn,
#generateEmbedTokenBtn,
#revokeTokenBtn,
#revokeAllTokensBtn,
#submitComponentBtn,
#deleteSelectedComponentsBtn,
#addComponentBtn,
#addLearnerComponentBtn,
#addCTABtn,
#removeCTABtn,
#partnerCTABtn,
#duplicateCustomiseScenarioBtn,
#customiseScenarioBtn,
#customiseFeedbackBtn,
#getResultsBtn,
#manageBtn,
#addCreatorBtn,
#addScenarioBtn,
#addFeedbackCriteriaBtn,
#addStyleBtn,
#addBotCharacterBtn,
#addContentBtn,
#addUsersBtn,
#addUserGroupBtn,
#updateCreatorSettingsBtn,
#addCreatorBtn,
#submitEmailsBtn,
#reactivateUserBtn,
#deactivateUserBtn,
#removeWhitelistedUserBtn,
#updateRegistrationCodeBtn {
  width: max-content;
  align-self: flex-end;
  border-radius: 3px;
  text-align: center;
  padding: 5px 7px;
  font-size: 1rem;
  border: solid 0.5px var(--main-theme-color-dark);
  background: var(--main-theme-color-dark);
  color: white;
  font-weight: bold;
}

.wizard-container #addCharacterBtn, .wizard-container #addCriteriaBtn {
  margin-top: 1rem;
}

.wizard-container #createCharacterGroupBtn, .wizard-container #createFeedbackGroupBtn {
  margin: 0rem 0rem 0rem 0.5rem;
  align-self: normal;
  white-space: nowrap;
}

#goToScenarioDesignerBtn {
  align-self: flex-start;
  margin-left: 30px;
}

.core-settings {
  display: flex;
  justify-content: space-between;
  align-self: flex-start;
}

.update-scenario-btn-top {
  display: flex;
  justify-content: end;
}

#copyInviteLinkBtn {
  background: none;
  color: #302fb2;
  border: none;
  margin: 0px;
  padding: 0px;
  font-weight: bold;
  align-self: flex-start;
  margin-top: 5px;
}

.copy-magic-link-btn i,
#copyInviteLinkBtn i {
  color: #302fb2
}

.copy-magic-link-btn {
  margin-top: 0px;
  align-items: center;
  border: none;
  background: none;
  padding-left: 3px;
}

.magic-code {
  font-size: 0.9rem;
  border: 0.5px solid #c2c3cb;
  padding: 3px;
  border-radius: 3px;
  background: #edeef1
}

.generate-magic-link-btn {
  font-size: 0.8rem;
  color: grey;
  text-decoration: underline;
  background: none;
  border: none;
}

#generateImageBtn,
#regenerateEmbeddingBtn,
#startNewWizardBtn,
#copyEmbedBtn,
#generateEmbedTokenBtn,
#removeWhitelistedUserBtn,
#customiseScenarioBtn,
#updateRegistrationCodeBtn,
#deactivateUserBtn {
  border: solid 0.5px var(--main-theme-color-dark);
  background: white;
  color: var(--main-theme-color-dark);
}

.button-group {
  display: flex;
  gap: 10px;
  margin: 10px 0px 5px 0px;
}

#generateImageBtn,
#saveImageBtn {
  align-self: flex-start;
}

.wizard-container .chat-input button.mic-icon {
  background: none;
  border: none;
  padding: 0px;
}

.wizard-container .chat-input button.mic-icon .circle {
  width: 60px;
  height: 60px;
}

.wizard-container .chat-input #txtInput {
  height: 50px !important;
  margin-left: 50px;
  margin-top: 5px;
}

.wizard-container .chat-input .chat-controls {
  margin-right: -50px;
}

.wizard-container .chat-input #sendBtn {
  align-self: normal;
}

#startNewWizardBtn {
  text-decoration: none;
}

#chatPage.iframe-container .start-conv-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  margin-top: -10px;
}

#chatPage.iframe-container .start-conv-container #startConvBtn {
  align-self: center;
}

#chatPage.iframe-container .start-conv-container .iframe-privacy-note {
  font-style: italic;
  font-size: 0.8rem;
  text-align: center;
  max-width: 70%;
}

#teachableDemoBtn {
  align-self: center;
  font-size: 1.5rem;
  padding: 7px 10px;
  margin: 5px;
  border-radius: 10px;
}

#updateRegistrationCodeBtn {
  margin: 0px 10px;
  margin-left: auto;
  text-decoration: none;
}

#saveImageBtn:disabled,
#startNewScenarioBtn:disabled,
#submitComponentBtn:disabled,
#deleteSelectedComponentsBtn:disabled,
#submitEmailsBtn:disabled,
#submitEmailsBtn[disabled] {
  border: solid 0.5px rgb(106, 102, 102);
  background: rgb(210, 208, 208);
  color: rgb(106, 102, 102);
  cursor: not-allowed;
}

#demoCTABtn {
  align-self: center;
  margin-top: 15px;
}

#demoCTABtn a {
  color: white;
  text-decoration: none;

}

#addComponentBtn,
#addLearnerComponentBtn,
#addCTABtn {
  border: solid 0.5px rgb(16, 168, 125);
  background: white;
  color: rgb(16, 168, 125);
  align-self: flex-start;
}

#addCTABtn:disabled {
  border: solid 0.5px rgb(106, 102, 102);
  background: rgb(210, 208, 208);
  color: rgb(106, 102, 102);
  cursor: not-allowed;
}

#removeComponentBtn,
#removeCTABtn {
  border: none;
  background: none;
  color: red;
}

#removeCTABtn {
  border: solid 0.5px red;
  align-self: flex-start;
}

#removeComponentBtn .fa-circle-xmark,
#removeCTABtn .fa-circle-xmark {
  color: red;
}

#revokeAllTokensBtn,
#revokeTokenBtn,
#deleteSelectedComponentsBtn {
  border: solid 0.5px red;
  background: white;
  color: red;
}

.edit-component-btn {
  border: none;
  background: none;
}

.toggle-seats-data {
  display: flex;
  align-items: center;
  margin: 5px 0px;
}

.toggle-seats-data p {
  margin: 0px 5px;
}

.magic-code-container {
  display: flex;
}

.flex-row-with-columns {
  display: flex;
  flex-direction: column;
}


/*****************************************************************************/
/***************************** DESIGN PAGE SETTINGS ****************************/
/*****************************************************************************/

/* Modern Form Groups */
.form-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: var(--spacing-2xl);
  position: relative;
}

.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--spacing-sm);
}

.form-group .form-control,
.form-group .form-select {
  width: 100%;
  padding: var(--spacing-md) var(--spacing-lg);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  background-color: white;
  font-size: var(--font-size-base);
  line-height: 1.5;
  color: var(--gray-900);
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-xs);
}

.form-group .form-control:focus,
.form-group .form-select:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px var(--primary-100);
}

.form-group .form-control::placeholder {
  color: var(--gray-400);
  font-size: var(--font-size-sm);
}

.form-check.has-error,
.form-group.has-error {
  background: var(--error-50);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
}

.form-group.has-error > .form-control,
.form-group.has-error > .form-select,
.form-group.has-error > div > .form-control,
.form-group.has-error > div > .form-select {
  border-color: var(--error-500);
  background-color: var(--error-50);
}

/* Don't apply error styling to component form controls when using individual component errors */
.form-group.has-error .components-container .form-control,
.form-group.has-error .components-container .form-select {
  border-color: var(--gray-300);
  background-color: white;
}

.form-group.has-error > .form-control:focus,
.form-group.has-error > .form-select:focus,
.form-group.has-error > div > .form-control:focus,
.form-group.has-error > div > .form-select:focus {
  border-color: var(--error-500);
  box-shadow: 0 0 0 3px var(--error-100);
}

/* Don't apply error focus styling to component form controls when using individual component errors */
.form-group.has-error .components-container .form-control:focus,
.form-group.has-error .components-container .form-select:focus {
  border-color: var(--primary-400);
  box-shadow: 0 0 0 3px var(--primary-100);
}

/* Individual component error styling */
.components-container .component-item.has-component-error {
  background-color: var(--error-50);
  border: 1px solid var(--error-300);
}

.components-container .component-item.has-component-error:hover {
  border-color: var(--error-400);
  box-shadow: 0 0 0 2px var(--error-100);
}

.component-item.has-component-error .component-fields .form-control {
  border-color: var(--error-500);
}

.component-item.has-component-error .component-fields .form-control:focus {
  border-color: var(--error-500);
  box-shadow: 0 0 0 3px var(--error-100);
}

.component-error-message,
.field-error-message {
  color: var(--error-600);
  font-size: 0.875rem;
  margin-top: var(--spacing-xs);
  margin-bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-weight: 500;
}

.component-error-message i,
.field-error-message i {
  font-size: 0.875rem;
}

/* Remove overall container error styling when individual errors are shown */
#components.has-error:has(.has-component-error),
#learner_components.has-error:has(.has-component-error) {
  background-color: transparent;
  border: none;
  padding: 0;
}

.form-group .errors {
  margin-top: var(--spacing-sm);
  padding: 0;
  list-style: none;
}

.form-group .errors li {
  color: var(--error-600);
  font-size: var(--font-size-sm);
  font-weight: 500;
  margin-bottom: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--error-50);
  border: 1px solid var(--error-200);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.form-group .errors li::before {
  content: "⚠️";
  font-size: var(--font-size-xs);
}

.form-check label,
.form-group label {
  font-weight: 600;
}

.form-group-title {
  display: flex;
}

.form-group-info {
  margin-left: 6px
}

.select2, .select2-container, .select2-container--default,
.form-group textarea,
.form-group input,
.form-group select {
  resize: none;
  width: 100%;
  padding: 5px;
}

.select2, .select2-container, .select2-container--default {
  padding: 0px;
}

.form-group .component {
  display: flex;
  margin: 5px;
  width: 100%;
  flex-direction: column;
}

.form-group .component .component-name {
  display: flex;
  align-items: center;
}

.form-group .component .component-name input {
  margin-left: 10px;
}

.form-group .component > * {
  margin: 5px 10px;
}

.form-group .component textarea {
  width: 100%;
}

.form-group .component input {
  width: 100%
}

.form-group .component button {
  width: max-content;
}

.component-header,
.component-content {
  display: grid;
  grid-template-columns: 2fr 6fr 0.5fr;
  gap: 10px;
}

.component-header { 
  font-weight: bold;
}

.component-content .remove-component-container {
  margin-left: auto;
  margin-right: auto;
}

.form-group .component hr {
  border: 0.5px solid #c9c9e4
}

.form-group textarea[readonly="readonly"],
.form-group input[readonly="readonly"] {
  background-color: var(--gray-50);
  pointer-events: none;
}

.form-group input.datepicker[readonly="readonly"] {
  background-color: white;
  pointer-events: visible;
}

th .form-text {
  font-size: 0.875rem;
  font-weight: normal;
}

#analyseEngagementPage h2 {
  margin-bottom: 0px;
}

#analyseEngagementPage .section-header,
#analyseEngagementPage .form-group {
  margin-bottom: 0px;
}

.home-container .manage-header .form-text,
.usage-dashboard .form-text,
.learner-conversations .form-text,
.home-container .form-body .form-text {
  margin: 0.5rem 0;
  padding: 1rem;
  background-color: var(--primary-50);
  border-left: 4px solid var(--primary-500);
  border-radius: 4px;
  font-size: 0.875rem;
  line-height: 1.5;
}

.home-container .form-container {
  display: flex;
}

/* Modern form-text styling */
.form-body .form-text {
  width: 100%;
  background-color: var(--primary-50);
  border-left: 4px solid var(--primary-500);
  border-radius: var(--radius-sm);
  padding: var(--spacing-lg);
  margin: var(--spacing-sm) 0;
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: var(--gray-700);
}

.form-body .form-text.warning {
  background-color: var(--warning-50);
  border-left-color: var(--warning-500);
  color: var(--warning-800);
}

.form-body .form-text.error {
  background-color: var(--error-50);
  border-left-color: var(--error-500);
  color: var(--error-800);
}

.form-body .form-text.success {
  background-color: var(--success-50);
  border-left-color: var(--success-500);
  color: var(--success-800);
}

.form-body .form-text code {
  background-color: var(--gray-100);
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 0.875em;
  color: var(--gray-800);
}

.form-body .form-text {
  font-size: 0.8rem;
  font-weight: normal;
  background: none;
  border: none;
  padding: 0;
}

/* Bot Instructions Section Enhancement */
.form-body .bot-instructions-section {
  background: linear-gradient(135deg, var(--primary-50) 0%, white 100%);
  border: 2px solid var(--primary-200);
  border-radius: var(--radius-lg);
  padding: var(--spacing-3xl);
  margin-bottom: var(--spacing-3xl);
  position: relative;
}

.form-body .bot-instructions-section::before {
  content: "🤖";
  position: absolute;
  top: var(--spacing-xl);
  right: var(--spacing-xl);
  font-size: 2rem;
  opacity: 0.3;
}

.form-body .bot-instructions-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-2xl);
  padding-bottom: var(--spacing-lg);
  border-bottom: 2px solid var(--primary-200);
}

.form-body .bot-instructions-header h3 {
  color: var(--primary-700);
  font-size: var(--font-size-xl);
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.form-body .bot-instructions-header .instruction-badge {
  background: var(--primary-500);
  color: white;
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-xl);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.form-body .template-variables-helper {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: var(--spacing-xl);
  margin-bottom: var(--spacing-2xl);
  box-shadow: var(--shadow-sm);
}

.form-body .template-variables-helper h4 {
  color: var(--gray-800);
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-lg);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.form-body .template-variables-helper h4::before {
  content: "💡";
  font-size: 1.2em;
}

.form-body .variables-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-lg);
  margin-top: var(--spacing-lg);
}

.form-body .variable-chip {
  background: var(--gray-100);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm) var(--spacing-md);
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: var(--font-size-sm);
  color: var(--gray-700);
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.form-body .variable-chip:hover {
  background: var(--primary-100);
  border-color: var(--primary-400);
  color: var(--primary-800);
  transform: translateY(-1px);
}

.form-body .variable-chip .copy-icon {
  opacity: 0;
  transition: opacity var(--transition-fast);
  font-size: var(--font-size-xs);
  color: var(--gray-500);
}

.form-body .variable-chip:hover .copy-icon {
  opacity: 1;
}

/* Enhanced Component Library Layout */
.form-body .form-group.detailed-bot-instructions {
  display: block;
}

.component-library-container {
  display: grid;
  grid-template-columns: 4fr 1fr;
  gap: var(--spacing-3xl);
  margin-bottom: var(--spacing-3xl);
}

.template-editor-section {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: var(--spacing-2xl);
  box-shadow: var(--shadow-sm);
}

.preview-container-header,
.edit-components-header,
.template-editor-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
  padding-bottom: var(--spacing-lg);
  border-bottom: 2px solid var(--primary-200);
}

.preview-container-header h4,
.edit-components-header h4,
.template-editor-header h4 {
  color: var(--primary-700);
  font-size: var(--font-size-lg);
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.component-library-section {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: var(--spacing-2xl);
  box-shadow: var(--shadow-sm);
}

.wizard-container .component-library-section {
  display: none;
}

.wizard-container .component-library-container {
  grid-template-columns: 1fr;
}

.component-library-section .component-library-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-xl);
  padding-bottom: var(--spacing-lg);
  border-bottom: 2px solid var(--primary-200);
}

.component-library-section .component-library-header h4 {
  color: var(--primary-700);
  font-size: var(--font-size-lg);
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}



.component-library-section .component-categories {
  display: grid;
  gap: var(--spacing-lg);

  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  transition: all var(--transition-fast);
  width: max-content;
}

/* .component-category:hover {
  background: var(--primary-50);
  border-color: var(--primary-300);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
} */

.component-library-section .component-category-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--gray-300);
}

§ .component-category-icon {
  font-size: var(--font-size-lg);
}

.component-library-section .component-category-title {
  font-weight: 600;
  color: var(--gray-800);
  font-size: var(--font-size-sm);
  margin: 0;
}


.component-library-section .component-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.component-library-section .component-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--gray-200);
  transition: all var(--transition-fast);
}

.component-library-section .component-list-item:last-child {
  border-bottom: none;
}

.component-library-section .component-list-item:hover {
  background: var(--primary-50);
  border-radius: var(--radius-sm);
  padding-left: var(--spacing-sm);
}

.component-library-section .component-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.component-library-section .component-name {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: var(--font-size-sm);
  color: var(--gray-700);
  background: var(--gray-100);
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gray-300);
  margin-right: 10px
}

.component-library-section .component-add-btn {
  background: var(--primary-500);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.25rem 0.5rem;
  font-size: var(--font-size-xs);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.component-library-section .component-add-btn:hover {
  background: var(--primary-600);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.component-library-section .component-add-btn:active {
  transform: translateY(0);
}


/* Modern Component Containers */
.components-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin: var(--spacing-lg) 0;
  width: 100%;
}

.components-container .component-item {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: all var(--transition-fast);
  position: relative;
}

.components-container .component-item:hover {
  border-color: var(--primary-300);
  box-shadow: var(--shadow-sm);
}

.components-container .component-item.dragging {
  opacity: 0.5;
  transform: rotate(2deg);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
}

.components-container .component-drag-handle {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 32px;
  /* background: var(--gray-100); */
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--gray-400);
  /* border-right: 1px solid var(--gray-200); */
  transition: all var(--transition-fast);
  flex-direction: column;
  gap: 2px;
  padding: var(--spacing-xs);
}

.components-container .component-drag-handle:hover {
  background: var(--primary-100);
  color: var(--primary-600);
}

.components-container .move-btn {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 2px;
  border-radius: var(--radius-xs);
  font-size: 10px;
  line-height: 1;
  transition: all var(--transition-fast);
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.components-container .move-btn:hover {
  background: var(--primary-200);
  color: var(--primary-700);
}

.components-container .move-btn:active {
  transform: scale(0.95);
}

.components-container .component-main-content {
  margin-left: 32px;
  padding: var(--spacing-lg);
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-lg);
}

.components-container .component-fields {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: var(--spacing-md);
  align-items: flex-start;
}

#scenarioComponentsContainer .component-fields {
  grid-template-columns: 0.5fr 1fr 1fr;
}

.components-container .learner-component-item .component-fields {
  grid-template-columns: 1fr 1fr 1fr 1fr
}

.components-container .component-field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.components-container .component-field label,
.components-container .option-group label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--gray-700);
  margin: 0;
}

.components-container .component-field label small {
  font-weight: 400;
  color: var(--gray-500);
}

.components-container .component-value-field {
  grid-column: span 2;
}

.components-container .component-checkbox-field {
  align-items: center;
  justify-content: center;
}

.components-container .component-actions {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
}

.components-container .component-expand-btn,
.components-container .component-remove-btn {
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--spacing-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

.components-container .component-expand-btn {
  color: var(--gray-600);
}

.components-container .component-expand-btn:hover {
  background: var(--primary-50);
  border-color: var(--primary-300);
  color: var(--primary-600);
}

.components-container .component-expand-btn.expanded i {
  transform: rotate(180deg);
}

.components-container .component-remove-btn {
  color: var(--error-600);
}

.components-container .component-remove-btn:hover {
  background: var(--error-50);
  border-color: var(--error-300);
  color: var(--error-700);
}

.components-container .component-details {
  border-top: 1px solid var(--gray-200);
  background: var(--gray-50);
  padding: var(--spacing-lg);
  margin-left: 32px;
}

.components-container .component-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--spacing-lg);
}

.components-container .option-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.components-container .option-group .form-control,
.components-container .option-group .form-select {
    padding: 0.5rem 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-size: 0.875rem;
    background-color: white;
    transition: all 0.15s ease-in-out;
}

.components-container .option-group .form-control:focus,
.components-container .option-group .form-select:focus {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-500-rgb), 0.15);
    outline: 0;
}

.components-container .option-group-full {
  grid-column: span 3;
}

/* First row items span multiple columns to create 2 equal items */
.components-container .option-group:nth-child(1) {
  grid-column: 1 / 2; /* spans first 1.5 columns worth */
}

.components-container .option-group:nth-child(2) {
  grid-column: 2 / 4; /* spans last 1.5 columns worth */
}

/* Second row items each take 1 column */
.components-container .option-group:nth-child(3) {
  grid-column: 1 / 2;
}

.components-container .option-group:nth-child(4) {
  grid-column: 2 / 3;
}

.components-container .option-group:nth-child(5) {
  grid-column: 3 / 4;
}

/* Responsive adjustments for modern components */
@media (max-width: 768px) {

  .component-library-container {
    grid-template-columns: 1fr !important;
  }

  .component-library-section {
    display: none;
  }

  .components-container .component-fields {
    grid-template-columns: 1fr !important;
    gap: var(--spacing-sm);
  }
  
  .components-container .learner-component-item .component-fields {
    grid-template-columns: 1fr;
  }
  
  .components-container .component-value-field {
    grid-column: span 1;
  }
  
  .components-container .component-details-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }
  
  .components-container .option-group-full {
    grid-column: span 1;
  }
  
  .components-container .component-main-content {
    flex-direction: column;
    gap: var(--spacing-md);
  }
  
  .components-container .component-actions {
    align-self: flex-end;
  }
}

/* Drag and drop visual feedback */
.components-container.drag-over {
  background: var(--primary-50);
  border: 2px dashed var(--primary-300);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm);
}

.components-container .drop-indicator {
  height: 3px;
  background: var(--primary-500);
  border-radius: var(--radius-full);
  margin: var(--spacing-xs) 0;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.drop-indicator.active {
  opacity: 1;
}

/* Sticky Navigation and Actions */
.scenario-form-sticky-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: white;
  border-bottom: 1px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
  z-index: 1000;
  padding: var(--spacing-lg) var(--spacing-2xl);
  transform: translateY(-100%);
  transition: transform var(--transition-normal);
}

.scenario-form-sticky-nav.visible {
  transform: translateY(0);
}

.sticky-nav-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
}

.sticky-nav-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--gray-800);
  margin: 0;
}

.sticky-nav-links {
  display: flex;
  gap: var(--spacing-lg);
  list-style: none;
  margin: 0;
  padding: 0;
}

.sticky-nav-links a {
  color: var(--gray-600);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: 500;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.sticky-nav-links a:hover {
  color: var(--primary-600);
  background-color: var(--primary-50);
}

.sticky-nav-links a.active {
  color: var(--primary-700);
  background-color: var(--primary-100);
}

.sticky-submit-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  border-top: 1px solid var(--gray-200);
  box-shadow: 0 -4px 6px -1px rgb(0 0 0 / 0.1);
  z-index: 1000;
  padding: var(--spacing-lg) var(--spacing-2xl);
  transform: translateY(100%);
  transition: transform var(--transition-normal);
}

.sticky-submit-actions.visible {
  transform: translateY(0);
}

.sticky-submit-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
}

.sticky-submit-info {
  color: var(--gray-600);
  font-size: var(--font-size-sm);
}

.sticky-submit-button {
  background: var(--primary-500);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  padding: var(--spacing-md) var(--spacing-2xl);
  font-size: var(--font-size-base);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

.sticky-submit-button:hover {
  background: var(--primary-600);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.sticky-submit-button:active {
  transform: translateY(0);
}

/* Add padding to body when sticky elements are visible */
body.sticky-nav-visible {
  padding-top: 80px;
}

body.sticky-submit-visible {
  padding-bottom: 80px;
}

@media (max-width: 768px) {
  .sticky-nav-links {
    display: none;
  }
  
  .sticky-submit-content {
    flex-direction: column;
    gap: var(--spacing-md);
    text-align: center;
  }
}

.form-group input.form-check-input {
  width: 1.3rem;
  height: 1.3rem;
}


.select2-container--default .select2-selection--multiple,
.select2-container--default .select2-selection--single {
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  padding: 5px;
  height: fit-content;
  
}


.select2-selection__choice__remove span {
  color: initial;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: #f5e5ca;;
  border: 1px solid var(--main-theme-color-dark);
}

/* Modern Scenario Form Sections */
.form-body .section {
  background: white;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--spacing-2xl);
  overflow: hidden;
  transition: all var(--transition-normal);
}

.form-body .section:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--gray-100);
}

.form-body .section.error-section {
  border-color: var(--error-500);
  background-color: var(--error-50);
}

.form-body .section-heading {
  background: linear-gradient(135deg, var(--gray-50) 0%, white 100%);
  padding: var(--spacing-xl) var(--spacing-2xl);
  border-bottom: 1px solid var(--gray-200);
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--gray-800);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: all var(--transition-fast);
  user-select: none;
}

.form-body .section-heading:hover {
  background: var(--primary-50);
  color: var(--main-theme-color-dark);
}

.form-body .section-heading .section-title i {
  margin-right: 10px;
}

.form-body .section-heading i.toggle-icon {
  color: var(--gray-400);
  transition: all var(--transition-fast);
  font-size: var(--font-size-base);
}

.form-body .section-heading:hover i.toggle-icon {
  color: var(--primary-500);
  transform: scale(1.1);
}

.form-body .section-heading.error-section {
  background: linear-gradient(135deg, var(--error-50) 0%, var(--error-100) 100%);
  color: var(--error-700);
  justify-content: flex-start;
  gap: 10px;
  border-bottom: none;
}

.form-body .section-heading.error-section i {
  color: var(--error-500);
}

.section {
  margin-bottom: 30px;
  }

.subsection-content,
.section-content {
  display: none;
  padding: var(--spacing-2xl);
  background: white;
}

.show-section {
  display: block;
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.error-section {
  color: var(--error-600);
}


section textarea {
  height: auto;
}

#partnerComponentsTable_wrapper {
  width: 100%;
}

#emptyPlaceholderWarning {
  margin-top: 10px;
}

.component-content .form-key {
  display: flex;
  align-items: baseline;
}

.edit-link {
  background: none;
  border: none;
  padding-left: 10px;
}

.entity-select {
  display: flex;
  width: 100%;
  gap: 5px;
}

.wizard-container .entity-select .edit-link {
  align-self: center;
}

#ctaContainer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

#contentItemForm #text.form-control {
  height: 400px;
}

.form-group #imagePreview {
  width: 200px;
  margin: 10px 0px;
}

/*****************************************************************************/
/***************************** CHAT PAGE SETTINGS ****************************/
/*****************************************************************************/

#transcriptPage,
#chatPage {
  background: var(--dark-text-color2);
  display: flex;
  flex-direction: row;
  height: 100%;
  margin: 0;
}


#transcriptPage .nav-container,
#chatPage .nav-container {
  flex-shrink: 0;
}

/* #chatPage .nav-container .nav-body {
} */

#transcriptPage .chat-container,
.wizard-container .chat-container,
#chatPage .chat-container,
#chatPage .assistant-container,
#chatPage .form-container {
  --dark-text-color2: #181826;
  --dark-text-color1: #2c2d4a;
  flex: 4;
  /* height: 95%; */
  /* width: 80%; */
  background: var(--white-color);
  /* position: fixed; */
  /* bottom: 2.5%; */
  /* right: 10%; */
  box-shadow: 0px 0px 15px 0px black;
  color: var(--dark-text-color1);
  display: flex;
  flex-direction: column;
  position: relative;
}

#transcriptPage .notes-container,
#chatPage .notes-container {
  flex: 1;
  background: var(--sidepanel-background-color);
  margin-right: 0%;
  display: flex;
  flex-direction: column;
  position: relative;
 transition: all 0.5s ease;
}

#transcriptPage .notes-container.hidden,
#chatPage .notes-container.hidden {
  visibility: hidden;
  flex: 0;
  width: 0;
  margin: 0;
  padding: 0;
}

#transcriptPage .notes-container .feedback-container {
  overflow: auto;
}

#transcriptPage .notes-container .objective,
#transcriptPage .notes-container .feedback-criteria,
#transcriptPage .notes-container .recommended-learning,
#chatPage .notes-container .objective,
#chatPage .notes-container .feedback-criteria,
#chatPage .notes-container .recommended-learning {
  flex: 1;
  border-radius: 5px;
  background-color: #f7f5f2;
  margin: 3% 3.5% 1% 3.5%;
  padding: 3%;
}

#transcriptPage .notes-container .objective p,
#chatPage .notes-container .objective p {
  white-space: pre-wrap;
  font-size: 0.9rem;
}


#transcriptPage .notes-container .feedback-criteria,
#chatPage .notes-container .feedback-criteria {
  flex: 2;
  overflow: auto;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.notes-container .feedback-criteria .criteria {
  flex: 1;
  overflow-y: auto;
  margin-bottom: 1rem;
}


#transcriptPage .notes-container .feedback-criteria .generate-feedback,
#chatPage .notes-container .feedback-criteria .generate-feedback,
#chatPage .notes-container .feedback-criteria .generate-feedback-new,
#chatPage.questions .generate-feedback {
  margin-top: auto;
  border-radius: 7px;
  background: rgb(226 220 220);
  color: rgb(88, 84, 84);
  text-align: center;
  padding: 5px;
  border: none;
  font-size: 0.9rem;
}

#transcriptPage .notes-container .feedback-criteria .generate-feedback,
#chatPage .notes-container .feedback-criteria .generate-feedback.active,
#chatPage.questions .generate-feedback.active {
  background: var(--main-theme-color-dark);
  color: white;
  font-weight: bold;
}

#chatPage .notes-container .feedback-criteria .generate-feedback-new {
  margin-left: 3px;
  margin-top: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
}


#chatPage .notes-container .feedback-criteria .generate-feedback-new.active {
  background: var(--main-theme-color-light);
  color: var(--dark-text-color1);
  font-weight: bold;
}

#transcriptPage .notes-container .feedback-criteria .generate-feedback:hover,
#chatPage .notes-container .feedback-criteria .generate-feedback.active:hover,
#chatPage .notes-container .feedback-criteria .generate-feedback-new.active:hover,
#chatPage.questions .generate-feedback.active:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.notes-container h4 {
  padding-bottom: 3px;
  font-size: 1rem !important;
  font-weight: bold;
}

.notes-container ol,
.notes-container ul {
  padding-left: inherit !important;
}

.notes-container .fc,
.notes-container .rr {
  font-size: 0.9rem;
  padding: 2px 0px;
}

.notes-container ul,
.notes-container li {
  margin-left: 0.4em;
  text-align: left;
}

.notes-container .fc li {
  list-style-type: disc;
}

.notes-container .fc span.show-tooltip {
  display: flex;
  border-bottom: 2px dotted #3350f6;
  cursor: help;
  display: inline-flex;
}

.notes-container li::marker{
  content:"• ";
  font-size: 0.9rem;
  color: black;
  vertical-align: bottom;
}

#transcriptPage .feedback-container hr,
#transcriptPage .notes-container hr,
#chatPage .feedback-container hr,
#chatPage .notes-container hr {
  display: block;
  border: 0.5px solid #c9c9e4;
}

/* .notes-container ul {list-style: none;}

.notes-container ul li:before{ content:"• "; font-size:10pt; } */

/* Responsive styles for mobile devices */
@media screen and (max-width: 768px) {
  #transcriptPage .nav-container,
  #chatPage .nav-container {
    display: none;
  }

  #transcriptPage .notes-container.visible,
  #chatPage:not(.iframe-container) .notes-container.visible {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
  }

  #chatPage:not(.iframe-container) .chat-toolbar #feedbackBtn {
    display: block;
  }
}

@media screen and (max-width: 400px) {

  #chatPage .chat-header {
    flex: 1;
    font-size: 0.9rem;
    align-items: center;
  }

  #chatPage #openRoleplayBtn, #chatPage #editScenarioBtn,
  #chatPage #duplicateConvBtn, #chatPage #newConvBtn,
  #chatPage #editScenarioBtn {
    padding-top: inherit;
  }

  #chatPage .chat-header .header-bottom {
    display: none;
  }

  #chatPage, #transcriptPage {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  #transcriptPage .chat-container,
  #chatPage .chat-container {
    display: flex;
    flex: 4;
    overflow: auto
  }


  #transcriptPage .notes-container,
  #chatPage .notes-container {
    display: none;
    flex: 1;
    overflow: auto
  }

  #transcriptPage hr,
  #chatPage hr {
    display: none;
  }

  #transcriptPage .nav-container,
  #chatPage .nav-container {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    flex: 0 1 auto;
    align-items: center;
    justify-items: center;
    overflow: auto;
    display: flex;
    flex: row;
    flex-direction: row;
    white-space: nowrap;
  }

  #chatPage .nav-container .nav-controls {
    display: flex;
  }
  #chatPage .nav-container .nav-content,
  #chatPage .nav-container .nav-info {
    display: none;}

  #chatPage .nav-container a {
    float: left;
    padding: 6px 8px;}

  #chatPage .nav-container .whats-new {
    display: none;
  }

  #chatPage .chat-end-ctas {
    flex-direction: column;
  }

  #chatPage .chat-end-container .chat-end-ctas > .cta {
    justify-content: center;
    margin: 3px !important;
  }

  #chatPage.iframe-container .chat-toolbar #feedbackBtn {
    display: block;
  }

}




/********************* CHAT HEADER *********************/

.form-header,
.chat-header {
  flex: 1.5;
  font-size: 1.25rem;
  display: flex;
  flex-direction: column;
}

.form-header .header-top,
.chat-header .header-top {
  flex: 1;
  background: var(--header-top-color);
  color: var(--header-top-text-color);
  border-bottom: solid 2px var(--header-top-bottom-border-color);
  display: flex;
  align-items: center;
  width: 100%
}

.form-header .header-top {
  background: var(--form-header-top-color);
  border-bottom: solid 2px var(--form-header-top-color);
}

.form-header .header-top .title-container,
.chat-header .header-top .title-container {
  flex: 1;
  padding: 1%;
  font-weight: bold;
}

.title-container .title {
  display: flex;
  align-items: center;
}

.title-container .title h1 {
  font-size: 20px;
}

.conv-controls {
  display: flex;
  align-items: baseline;
  margin-top: 7px;
}


.conv-controls a {
  text-decoration: none;
}

.control-button i {
  margin-right: 6px;
  font-size: 17px;
}

.title-container #copyScenarioLinkBtn,
.conv-controls #openRoleplayBtn,
.conv-controls #editScenarioBtn,
.conv-controls #newConvBtn,
.conv-controls #duplicateConvBtn {
  overflow: visible;
  border: none;
  color: var(--header-button-color);
  background: none;
  margin-left: 5px;
}

#openRoleplayBtn .tooltip-nobs,
#editScenarioBtn .tooltip-nobs,
#copyScenarioLinkBtn .tooltip,
#editScenarioBtn .tooltip,
#newConvBtn .tooltip,
#duplicateConvBtn .tooltip {
  position: absolute;
  margin-left: 3px;
  z-index: 2
}

#scenariosTable td #copyScenarioLinkBtn {
  background: none;
  border: none;
  margin-left: 3px;
}

#scenariosTable td #copyScenarioLinkBtn i {
  color: var(--main-theme-color-dark);
}

#showFormBtn,
#showChatBtn,
#clearConvBtn,
#switchRolesBtn,
#autoPlayBtn,
#convSettingsBtn,
#botCharacterBtn,
#timerBtn,
#audioBtn,
#saveChatBtn,
#rightPanelBtn,
#showVideoBtn,
#showInstructionsBtn {
  border: none;
  color: var(--header-button-color);
  background: none;
  padding: 1%;
}

#expandBtn {
  border: none;
  background: none;
  color: var(--sidepanel-background-color);
  align-items: flex-start;
  margin-left: auto;
}

.header-top hr {
  height: 100%;
  border: 0.3px solid white;
  margin: 10px;
}

#selectedCharacterTxt {
  margin-top: 5px;
  font-size: 0.9rem;
  text-align: center;
  padding: 2px;
  border-radius: 3px;
  font-weight: bold;
  width: 120px;
  
}

.button-grid {
  display: grid;
  margin: 3px 10px 3px 3px;
  grid-gap: 15px;
  grid-template-columns: repeat(2, 1fr);
}

.chat-header .header-bottom {
  flex: 2 1 0;
  background: var(--header-bottom-color);
  color: var(--header-bottom-text-color);
  border-bottom: solid 2px var(--header-bottom-bottom-border-color);
  align-items: flex-start;
  padding: 1%;
  overflow-y: auto;
  display: flex;
}

.chat-header .header-bottom .instructions {
  font-size: 1rem;
  white-space: pre-line;
}

.chat-header .header-bottom .instructions ol,
.chat-header .header-bottom .instructions ul {
  margin-left: 1rem;
}

.instructions-modal p,
.chat-header .header-bottom .instructions p {
  margin-bottom: 1rem;
}

/********************* INFO/MESSAGES *********************/

#info-messages {
  display: flex;
  margin: 5px 15px 5px 15px;
  font-size: 0.9rem;
  font-style: italic;
  color: rgb(107, 106, 106);
  justify-content: space-between;
}

.show-messages-container {
  margin-left: auto;
  justify-content: flex-start;
  height: 2px
}

#showMessagesBtn {
  border: none;
  background: none;
  margin-left: auto;
  z-index: 2;
  position: relative;
}

.whisper-beta {
  padding-top: 5px;
  display: flex;
  align-items: center;
}

.whisper-beta span {
  font-weight: bold;
}

.whisper-beta p {
  padding-left: 4px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 30px;
  min-width: 30px;
  height: 15px;
  min-height: 15px;
}

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

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 50%;
}

.slider:before {
  position: absolute;
  content: "";
  height: 80%;
  width: 40%;
  left: 8%;
  bottom: 10%;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: var(--main-theme-color-dark);
}

input:checked + .slider:before {
  transform: translateX(100%);
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}


/********************* CHAT BODY INC. MESSAGES *********************/

#chatPage .audio-body,
.wizard-container .chat-body,
#transcriptPage .chat-body,
#chatPage .chat-body {
  flex: 4;
  padding: 0% 0% 0.5% 0%;
  overflow: hidden;
  overflow-y: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.chatbot-message,
.user-message {
  word-wrap: break-word;
  display: flex;
  align-items: center;
  width: 100%
}

.chatbot-message {
  align-items: flex-start;
}

.prefix {
  font-weight: bold;
}

.moderated-message,
.message-content {
  transform: translate(-50%);
  opacity: 0;
  animation: fade-in-left 0.3s ease-in-out both;
  flex: 1;
  margin: 10px 15px;
}

.moderated-message {
  font-size: 0.8rem;
  font-style: italic;
  margin: 0px 30px;
  flex: 0;
}

.message {
  margin-top: 5px;
  max-width: 100%;
}

.user-message .messageFeedbackIcon.hide-icon {
  visibility: hidden;
  opacity: 0;
}

.user-message .extraIcon,
.chatbot-message .extraIcon,
.user-message .messageFeedbackIcon {
  transform: translate(50%);
  opacity: 1;
  animation: fade-in-right 0.6s ease-in-out both;
  margin-left: auto;
  margin: 0px 10px;
  visibility: visible;
  color: grey;
  background: none;
  border: none;
  font-size: 1rem;
}

.user-message .extraIcon,
.chatbot-message .extraIcon {
  visibility: hidden;
  align-self: center;
}

.user-message .editMessageIcon {
  transform: translate(50%);
  opacity: 0;
  animation: fade-in-right 0.6s ease-in-out both;
  margin-left: auto;
  margin: 0px 10px;
  visibility: hidden;
  color: grey;
  background: none;
  border: none;
  font-size: 1rem;
}

.chatbot-message .playbackIcon {
  margin: 0px 10px;
  visibility: visible;
  display: inline-block;
  border: none;
  background: none;
  color: var(--dark-text-color1);
}

.chatbot-message .showTextIcon {
  transform: translate(50%);
  opacity: 0;
  animation: fade-in-right 0.6s ease-in-out both;
  display: inline-block;
  position: absolute;
  right: 0;
  visibility: hidden;
  color: grey;
}

.chatbot-message:hover,
.user-message:hover {
  background: #faf5ed;
}

.user-message:hover .extraIcon,
.chatbot-message:hover .extraIcon,
.user-message:hover .messageFeedbackIcon,
.user-message:hover .editMessageIcon,
.chatbot-message:hover .showTextIcon {
  visibility: visible;
}


#chatPage .chat-end-container .chat-end-ctas {
  display: flex;
  margin: 0.5% 0.5%;
  justify-content: center;
  align-items: stretch;
}

#chatPage.scenario-select .card,
#chatPage .chat-end-container .chat-end-ctas > .cta {
  margin: 0% 0.5%;
  border: solid 0.5px var(--main-theme-color-dark);
  background: var(--white-color);
  color: var(--main-theme-color-dark);
  border-radius: 3px;
  display: flex;
  padding: 3px;
  align-items: center;
  text-align: center;
}

#chatPage .chat-end-container .chat-end-ctas .cta-heading {
  font-size: 1rem;
  font-weight: bold;
}

#chatPage .chat-end-container .chat-end-ctas .partner-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  white-space: pre-line;
}

#chatPage.scenario-select .card:hover,
#chatPage .chat-end-container .chat-end-ctas > .cta:hover {
  box-shadow: 0px 3px 3px var(--end-chat-cta-hover-border-color);
  background: var(--end-chat-cta-hover-color);
}

#chatPage .chat-end-container a {
  text-decoration: none;
}

#nextScenarioBtn,
#tryAgainBtn,
#randomScenarioBtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: max-content;
  text-align: center;
  padding: 5px 7px;
  font-size: 1rem;
  font-weight: bold;
  background: none;
  border: none;
  color: var(--main-theme-color-dark);
}

#partnerCTABtn {
  background: var(--main-theme-color-dark);
  color: var(--white-color);
  align-self: center;
}

#partnerCTABtn:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.select-scenario.cta .select-scenario-form {
  display: flex;
  flex-direction: column;
}

.select-scenario.cta .select-scenario-form .form-select#nextScenarioSelect {
  font-size: 1rem;
  font-weight: bold;
  color: var(--main-theme-color-dark);
  border: 0.5px solid var(--main-theme-color-dark);
}

/********************* CHAT INFO *********************/

.chat-info {
  display: flex;
  flex: 0.2;
  margin: 0% 0.5%;
  justify-content: space-between;
  align-items: flex-end;
  position: relative;
}

.timer-container {
  margin: 5px 5px;
  /* Add more styles for positioning and appearance as needed */
  white-space: nowrap; /* Prevent wrapping */
}

.timer {
  font-weight: bold;
  font-size: 0.8rem;
  display: inline-block;
}

.chat-info .chat-status {
  flex: 1;
  margin: 0.5% 1.5%;
  display: flex;
  align-items: center;
}

.audio-loading-indicator,
.chat-info .chat-status .recording-status,
.chat-info .chat-status .loading,
.chat-info .chat-status .user-loading {
  flex: 1;
  font-weight: bold;
  display: flex;
}
.audio-loading-indicator > .circle,
.chat-info .chat-status .recording-status > .circle,
.chat-info .chat-status .loading > .circle,
.chat-info .chat-status .user-loading > .circle {
  height: 6px;
  width: 6px;
  background-color: var(--dark-text-color1);
  margin: 3px;
  border-radius: 50%;
}

.audio-loading-indicator > .circle,
.chat-info .chat-status .recording-status > .circle {
  background-color: var(--main-theme-color-dark);
}

.audio-loading-indicator,
.chat-info .chat-status .recording-status {
  color: var(--main-theme-color-dark);
}

.audio-loading-indicator {
  flex: 0;
}

.circle-1 {
  animation: blink 1s ease-in-out 0ms both infinite;
}

.circle-2 {
  animation: blink 1s ease-in-out 200ms both infinite;
}

.circle-3 {
  animation: blink 1s ease-in-out 400ms both infinite;
}


.spinner {
  border: 5px solid #f5f5f5; /* Light grey */
  border-top: 5px solid var(--main-theme-color-light); /* Orange */
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 2s linear infinite;
  margin-left: 10px;
}

#chatPage.audio-question #toggleTranscriptBtn .tooltip,
#chatPage.audio-question #toggleTxtInputBtn .tooltip,
#viewAsToggle .tooltip,
.wizard-container .character-card .character-actions .tooltip,
#showFormBtn .tooltip-nobs,
#showChatBtn .tooltip-nobs,
#openRoleplayBtn .tooltip-nobs,
#editScenarioBtn .tooltip-nobs,
#autoPlayBtn .tooltip-nobs,
#clearConvBtn .tooltip-nobs,
#copyScenarioLinkBtn .tooltip,
#newConvBtn .tooltip,
#editScenarioBtn .tooltip,
#duplicateConvBtn .tooltip,
#timerBtn .tooltip,
#audioBtn .tooltip,
#expandBtn .tooltip,
#saveChatBtn .tooltip,
#feedbackBtn .tooltip,
#transcriptFeedbackBtn .tooltip,
#botCharacterBtn .tooltip,
#switchRolesBtn .tooltip,
#autoPlayBtn .tooltip,
#convSettingsBtn .tooltip,
.editMessageIcon .tooltip,
.messageFeedbackIcon .tooltip,
.extraIcon .tooltip,
.showTextIcon .tooltip {
  visibility: hidden;
  background-color: var(--tooltip-background-color);
  color: #fff;
  text-align: center;
  padding: 5px 10px;
  border-radius: 6px;
  font-weight: normal;
  font-size: 0.75rem;
  width: max-content;
}


.extraIcon .tooltip,
.messageFeedbackIcon .tooltip,
.editMessageIcon .tooltip,
.showTextIcon .tooltip {
  position: absolute;
  right: 130%;
  top: -2px;
}

.extraIcon .tooltip {
  background: #e2eef8;
  color: var(--dark-text-color1);
  width: 800px;
  text-align: left;
  z-index: 2;
  top: -100px;
}


#showFormBtn,
#showChatBtn,
#clearConvBtn,
#transcriptFeedbackBtn,
#feedbackBtn,
#timerBtn,
#audioBtn,
#saveChatBtn,
#botCharacterBtn,
#switchRolesBtn,
#autoPlayBtn,
#convSettingsBtn,
#expandBtn {
  position: relative;
}

#showFormBtn .tooltip-nobs,
#clearConvBtn .tooltip-nobs,
#autoPlayBtn .tooltip-nobs  {
  position: absolute;
  right: 120%;

}

#transcriptFeedbackBtn .tooltip,
#feedbackBtn .tooltip,
#timerBtn .tooltip,
#audioBtn .tooltip,
#expandBtn .tooltip,
#saveChatBtn .tooltip,
#switchRolesBtn .tooltip,
#autoPlayBtn .tooltip,
#convSettingsBtn .tooltip {
  position: absolute;
  right: 120%;
  top: -20%;
}

#botCharacterBtn .tooltip {
  position: absolute;
  right: 70%;
}

#transcriptPage #transcriptFeedbackBtn .tooltip,
#chatPage #feedbackBtn .tooltip {
  position: absolute;
  right: 113%;
  top: -13px;
}

/* Show the tooltip text when you mouse over the tooltip container */
#chatPage.audio-question #toggleTranscriptBtn:hover .tooltip,
#chatPage.audio-question #toggleTranscriptBtn:focus .tooltip,
#chatPage.audio-question #toggleTxtInputBtn:hover .tooltip,
#chatPage.audio-question #toggleTxtInputBtn:focus .tooltip,
#viewAsToggle:hover .tooltip,
#viewAsToggle:focus .tooltip,
.wizard-container .character-card .character-actions button:hover .tooltip,
.wizard-container .character-card .character-actions button:focus .tooltip,
#showFormBtn:hover .tooltip-nobs,
#showChatBtn:hover .tooltip-nobs,
#openRoleplayBtn:hover .tooltip-nobs,
#editScenarioBtn:hover .tooltip-nobs,
#autoPlayBtn:hover .tooltip-nobs,
#clearConvBtn:hover .tooltip-nobs,
#copyScenarioLinkBtn:hover .tooltip,
#copyScenarioLinkBtn:focus .tooltip,
#newConvBtn:hover .tooltip,
#newConvBtn:focus .tooltip,
#editScenarioBtn:hover .tooltip,
#editScenarioBtn:focus .tooltip,
#duplicateConvBtn:hover .tooltip,
#duplicateConvBtn:focus .tooltip,
#transcriptFeedbackBtn:hover .tooltip,
#transcriptFeedbackBtn:focus .tooltip,
#feedbackBtn:hover .tooltip,
#feedbackBtn:focus .tooltip,
#timerBtn:hover .tooltip,
#timerBtn:focus .tooltip,
#audioBtn:hover .tooltip,
#audioBtn:focus .tooltip,
#expandBtn:hover .tooltip,
#expandBtn:focus .tooltip,
#saveChatBtn:hover .tooltip,
#saveChatBtn:focus .tooltip,
#botCharacterBtn:hover .tooltip,
#botCharacterBtn:focus .tooltip,
#switchRolesBtn:hover .tooltip,
#switchRolesBtn:focus .tooltip,
#autoPlayBtn:hover .tooltip,
#autoPlayBtn:focus .tooltip,
#convSettingsBtn:hover .tooltip,
#convSettingsBtn:focus .tooltip {
  visibility: visible;
}

#feedbackBtn {
  display: none;
  border: none;
  background: none;
  color: grey;
}

.chat-info .fun-message {
  background-color: #f6e7cf;
  position: absolute;
  right: 0;
  padding: 7px;
  margin: 3px;
  border-radius: 9px 9px 0px 9px;
  z-index: 999;
  max-width: 40%;
  font-size: 0.9rem;
  font-style: italic;
}

.video-container {
  display: flex;
  height: 30%;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  flex-grow: 4;
  flex-shrink: 0; 
  position: relative;
}

.avatar-container,
#avatarCanvas,
#mediaStreamVideo,
#botVideo,
#userWebcam {
  /* position: absolute; Add back when add back webcam*/
  top: 5px;
  height: calc(100% - 10px);
  /* width: calc(50% - 10px); */
  object-fit: cover;
  background: white
}

#avatarStream {
  width: 100%;
  height: 100%;
  position: relative;
}

.avatar-container {
  display: flex;
  margin-left: auto;   /* Remove when add back webcam */
  margin-right: auto;   /* Remover when add back webcam */
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.avatar-container .avatar-loading {
  display: flex;
  flex-direction: column;
  align-self: center;
}

.avatar-container .avatar-loading .loading-text {
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--main-theme-color-dark);
  margin-top: 20px;
}

.avatar-container .avatar-loading .spinner {
  border: 7px solid #f5f5f500;
  border-top: 7px solid var(--main-theme-color-dark);
  width: 80px;
  height: 80px;
}

#avatarStream .card,
#avatarStream #debug {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}

#avatarStream .card {
  width: 50%;
  margin: 5px;
  bottom: 20px; /* Adjust this value to set the distance from the bottom */
}

#avatarStream #debug {
  width: 50%;
  bottom: 5px;
  margin: 5px;
}

/* Remove when add back webcam */
#avatarCanvas {
  display: flex;
  margin-left: auto;
  margin-right: auto;
}

#avatarCanvas,
#mediaStreamVideo,
#botVideo {
  left: 5px;
}

#userWebcam {
  right: 5px;
}

#avatarStream .card,
#avatarStream #debug {
  z-index: 10;
}


/********************* CHAT INPUT INC. TOOLBAR *********************/

.chat-input {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-bottom: 5px;
}

.chat-input .chat-controls {
  margin: 0.5%;
  border: 1px solid #cccc;
  border-radius: 10px;
  position: relative;
  left: -50px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  margin-right: -40px;
}

.chat-input .chat-toolbar {
  flex: 0.5;
  color: grey;
  background: #f5f5f5;
  border-radius: 10px 10px 0px 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.chat-input .chat-toolbar .toolbar-icons {
  display: flex;
  width: 100%;
  align-items: center;
}

.chat-toolbar .toolbar-icons .left-icons {
  display: flex;
}

.chat-toolbar .toolbar-icons .right-icons {
  display: flex;
  margin-left: auto;
  align-items: center;
}

.hint-icon {
  margin: 10px 5px 10px 10px;
  background: none;
  border: none;
  color: grey;
}

.encourage-icon, .critique-icon, .feedback-icon {
  display: flex;
  margin: 10px 10px 10px 5px;
}

.vl {
  border-left: 1px solid #cccc;
  margin: 0px 5px;
  height: 40px}

.chat-input .chat-inputbar {
  flex: 1;
  align-items: center;
  display: flex;
}

.circle {
  height: 90px;
  width: 90px;
  background-color: var(--mic-circle-color);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 8px;
  position: relative;
  z-index: 1;
}

.mic-icon {
  background: none;
  border: none;
  font-size: 16px;
}

.mic-icon :hover {
  cursor: pointer;
}

.mic-icon i {
  color: var(--mic-icon-color);
}

#chatPage .chat-input .toolbar-icons,
#chatPage .chat-input .chat-inputbar {
  margin-left: 45px
}

.chat-input .chat-inputbar .input-sec {
  flex: 1;
  align-items: center;
}

.chat-input .chat-inputbar .send {
  flex: 1;
}

#sendBtn{
  align-self: right;
  padding: 1%;
  color: grey;
  background: none;
  border: none;
}

#txtInput {
  padding: 1% 1% 0px 1%;
  border: none;
  outline: none;
  caret-color: black;
  font-size: 1rem;
  width: 100%;
  font-family: 'FontAwesome', 'Lato';
  font-weight: normal;
  /* overflow: hidden; */
  resize: none; /* prevent manual resize */
  line-height: 1;
  max-height: 200px;
}

#txtInput:disabled {
  background-color: white;
}

.disabled {
  pointer-events: none;
}

#charsLeft {
  font-style: italic;
  font-size: 0.9rem;
  padding-right: 12px;
  color: rgb(88, 84, 84)
}


/********************* HINTS *********************/

.hints-container {
  display: flex;
}

.hints-container:has(.hints:not([style*="display: none"])) {
  width: 100%;
}

.hints-container:has(.hints:not([style*="display: none"])) .hints {
  width: 100%;
}

.hints-container:has(.hints:not([style*="display: none"])) ~ .chat-status {
  display: none;
}

.hints {
  margin: 0px 0px 5px 0px;
  position: relative;
  margin-bottom: 1px;
  margin-left : 1px;
  display: flex;
  z-index: 1;
}

.hint-button {
  flex: 1;
  margin: 0px 4px 0px 4px;
  padding: 3px 10px;
  /* max-width: 30%; */
  border-radius: 5px;
  background: var(--hint-button-color);
  border: 0.5px solid var(--hint-button-border-color);
}

.hint-button:hover, .hint-button:focus-within {
  box-shadow: 0px 3px 3px var(--hint-button-border-color);
}


/********************* MODAL *********************/

/* The Modal (background) */
.component-modal,
#customiseScenarioModal,
#customiseFeedbackModal,
.invite-modal,
.accept-modal,
.interview-modal,
.feedback-modal,
.instructions-modal,
.learner-input-modal,
.customise-modal {
  display: none; /* Hidden by default */
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
  margin: auto;
  transform: translate(-50%, -50%);
  width: 50%;
  max-height: 90%;
  z-index: 3; /* Sit on top */
  overflow: hidden;
  overflow-y: auto;
  background: var(--white-color); /* Fallback color */
  border: 1px solid #cccc;
  border-radius: 10px;
  padding: 20px;
}

/* Learner Input Modal Styles */
.learner-input-modal {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  z-index: 2;
  padding: 0px;
}



#feedbackModal {
  background: #eff2f4;
  padding: 5px 20px 20px 20px;
}

.invite-modal {
  position: fixed;
  left: 58%;
}

.feedback-modal ul,
.feedback-modal ol {
  margin-left: 0.4em;
  padding-left: 1rem;
}

.feedback-modal ul li,
.feedback-modal ol li {
  padding: 5px 6px;
}

.component-modal {
  width: max-content;
  position: fixed;
  left: 58%;
}

.component-modal #addComponentBtn {
  margin-left: auto;
}

.invite-modal {
  position: fixed;
  left: 58%;
}

.instructions-modal {
  /* display: block; */
  white-space: pre-wrap;
  width: 95%;
  height: max-content;
  padding: 0px 20px 5px 20px;
  max-height: 95%;
}

.instructions-modal .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.instructions-modal .title {
  text-align: center;
  flex-grow: 1; /* this will let the title take as much space as available, centering it */
}

.instructions-modal .instruction-controls {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 15px;
}

.instructions-modal .dont-show-again {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--dark-text-color2);
}

.instructions-modal .dont-show-checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.instructions-modal .dont-show-label {
  cursor: pointer;
  margin: 0;
  font-weight: normal;
  user-select: none;
}

.instructions-modal ul,
.instructions-modal ol {
  padding-left: 1rem;
}

.instructions-modal .criteria {
  white-space: normal;
}

.close-modal {
  margin-left: auto; /* this will push it to the right as much as possible */
  color: var(--dark-text-color2);
  font-size: 20px;
  font-weight: bold;
  border: none;
  background: none;
}

.feedback-header {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-bottom: 10px
}

.assistant-container .beta,
.nav-container .beta,
.feedback-header .beta {
  border-radius: 5px;
  /* background:#33d096; */
  background: var(--beta-chip-color);
  color: white;
  font-weight: bold;
  padding: 3px 5px;
  margin-left: 5px;
  font-size: 0.9rem;
}

.assistant-container .beta,
.nav-container .beta {
  background: var(--sidepanel-beta-chip-color);
  font-size: 0.7rem;
}

.accept-modal,
.instructions-modal .title,
.feedback-modal .feedback-title,
.feedback-modal .feedback-loader,
.feedback-modal .feedback-loader-footer {
  text-align: center;
}

.notes-container .feedback-modal h4 {
  font-family: 'Lato', sans-serif;
}

.accept-modal {
  display: flex;
  flex-direction: column;
  width: 60%;
  z-index: 2;
}

.accept-modal .accept-title span {
  font-family: 'Convergence', sans-serif;
}

.accept-modal .accept-title #Beta {
  color: var(--main-theme-color-dark);
}

.accept-modal .accept-title {
  margin: 10px;
}

.accept-modal .accept-item {
  display: flex;
  margin: 15px 2px;
}

.accept-modal .accept-text {
  font-size: 0.9rem;
}

.accept-modal .accept-button {
  padding: 5px 10px;
  margin: 15px;
  background: var(--main-theme-color-dark);
  color: white;
  border: var(--main-theme-color-dark);
  max-width: fit-content;
  border-radius: 7px;
  margin-left: auto;
  margin-right: auto;
}

.accept-modal .accept-button:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.feedback-modal {
    white-space: pre-line;
    background: #e1e8ed;
    border: none;
    width: 80%
}

.hover-text {
  margin: 15px 0px;
  font-style: italic;
  color: #363544;
  font-size: 0.9rem;
  text-align: center;
}

.feedback-modal .criteria-element {
  margin: 0px 0px 10px 0px;
}

.feedback-modal .criteria-header {
  display: flex;
  flex-direction: row;
  align-items: baseline;
}

/* .feedback-modal .criteria-title {
} */

.feedback-modal .criteria-guidance-icon,
.feedback-modal .criteria-score {
  margin-left: 10px;
  font-style: bold;
  display: flex;  
}

.feedback-modal .criteria-guidance-icon {
  color: grey;
}

.feedback-modal .criteria-guidance-icon.active {
  color: black;
}

.feedback-modal .criteria-guidance-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}

/* Move flex properties to a new inner container */
.feedback-modal .criteria-guidance {
  display: flex;
  gap: 1rem;  /* Gap between line and content */
}

.feedback-modal .criteria-guidance-text {
  display: flex;
  flex-direction: column;
}
.feedback-modal .criteria-element .feedback-section-title,
.feedback-modal .criteria-element .reasons-title {
  margin-top: 1rem;
}

.feedback-modal .criteria-element .criteria-suggestions {
  margin-bottom: 1rem;
}

/* Add the line */
.feedback-modal .criteria-guidance::before {
  content: "";
  flex-shrink: 0;  /* Prevent line from shrinking */
  width: 4px;
  border-radius: 9999px;
  background-color: #d1d5db;
}

/* Add a content wrapper div for the actual content */
.feedback-modal .criteria-guidance-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.feedback-modal .criteria-guidance-container p {
  color: #4b5563;
  margin: 0;
  font-size: 0.9rem;
}

.feedback-modal .criteria-guidance-container .criteria-guidance-content a {
  text-decoration: none;
  color: #4b5563;
  border-bottom: 2px dotted var(--main-theme-color-dark);
}

.feedback-modal .criteria-score-rating {
  height: 20px;
  width: 20px;
  border-radius: 50%;
}

.feedback-modal .criteria-score-rating.insufficient_evidence {
  width: max-content;
  align-self: normal;
}

.feedback-modal .criteria-score-desc {
  margin-left: 5px;
  font-size: 0.9rem;
  font-style: italic;
}

.feedback-modal .criteria-score-reasons,
.feedback-modal .criteria-suggestions {
  font-size: 0.9rem;
}

.feedback-modal .resource-recommendations-container a {
  font-size: 0.9rem;
  text-decoration: none;
  border-bottom: dotted 0.5px var(--main-theme-color-dark);
  color: inherit;
} 

.feedback-modal .resource-recommendations-container {
  margin-bottom: 1rem;
}

.expand-button,
.expand-icon {
  margin-left: auto;
  background: none;
  border: none;
}

.interview-modal {
  z-index: 2;
  opacity: 1.0;
}

.interview-modal #jobSelectDropdown {
  margin: 10px 5px 5px 5px;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 0.75rem;
}


.job-description-input {
  display: block;
  width: 98%;
  margin: 5px;
  padding: 10px 10px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  overflow: hidden;
  resize: none;
  min-height: 40px;
  line-height: 20px;
  font-size: 0.75rem;
}

.job-description-input[contenteditable]:empty::before {
  content: "Copy and paste your job description here...";
  color: gray;
}

.interview-modal .purpose-text {
  margin: 15px 5px;
  font-size: 0.75rem;
  font-style: italic;
  font-weight: bold;
}

.interview-modal .interview-settings {
  display: flex;
  margin: 5px;
  justify-content: center;
}

.audio-only-setting,
.timer-setting {
display: flex;
justify-content: center;
background: var(--main-theme-color-dark);
border: solid var(--main-theme-color-dark);
color: white;
border-radius: 7px;
margin: 5px;
padding: 8px 10px;
font-weight: bold;
width: max-content;
font-size: 0.9rem;
}

.interview-modal .audio-only-icon,
.interview-modal .timer-icon {
  padding: 0px 5px 0px 0px;
}

.interview-modal .warning-text {
  color: var(--main-theme-color-dark);
  font-size: 0.75rem;
  text-align: center;
  font-weight: bold;
}

.interview-modal #saveCloseButton {
  border: none;
  color: var(--main-theme-color-dark);
  border: solid var(--main-theme-color-dark);
  background: white;
  border-radius: 4px;
  margin: 5px;
  padding: 8px 10px;
  float: right;
  /* display: flex;
  justify-content: center; */
  font-weight: bold;
}

.interview-modal .audio-only-setting:hover,
.interview-modal .timer-setting:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}

.modal-button-disabled {
  color: var(--main-theme-color-dark);
  background: white;
  border: solid var(--main-theme-color-dark);
}

.interview-modal .audio-only-setting.modal-button-disabled:hover,
.interview-modal .timer-setting.modal-button-disabled:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}

.interview-modal #saveCloseButton:hover,
.interview-modal #saveCloseButton:focus {
  color: white;
  background: var(--main-theme-color-dark);
}

/* Modal Content/Box */
.modal-content {
  font-size: 0.8rem;
}

/* The Close Button */
.feedbackInfoBtn,
.splitPaneBtn,
.closeFeedback {
  color: var(--dark-text-color2);
  float: right;
  font-size: 20px;
  font-weight: bold;
  border: none;
  background: none;
}

.feedbackInfoBtn,
.splitPaneBtn {
  font-size: initial;
  margin-right: 10px;
  margin-top: 3px;
}

.customise-modal {
  display: flex;
  align-items: center;
  justify-content: center;
}

.customise-modal img {
  height: 80px;
}

.customise-modal .characters {
  display: grid;
  gap: 1rem;
  margin: 0 auto;
  align-items: flex-start;
  justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
}

.customise-modal .character-title {
  font-weight: bold;
}

.customise-modal .character-button {
    border: solid white;
    background-color: var(--white-color);
    padding: 3%;
}

.character-button.active {
  border: solid rgb(255, 255, 255);
}

.customise-modal .character-button:hover,
.customise-modal .character-button:focus {
  background-color: #f7f9fc;
  border-radius: 7px;
}

.customise-modal .character-button:hover img,
.customise-modal .character-button:focus img {
  height: 85px;
}

.customise-modal .character-level {
  /* font-style: italic; */
  margin-top: 5px;
}

/* .character-button .easy {
  color: rgb(30, 212, 118);
}

.character-button .medium {
  color: rgba(240, 101, 31, .85)
}

.character-button .hard {
  color: rgb(243, 37, 37)
} */

.customise-modal .confirm-button {
  color: var(--main-theme-color-dark);
  background: white;
  border: solid var(--main-theme-color-dark);
  padding: 3px 7px;
  margin-top: 7px;
  border-radius: 4px;
  font-weight: bold;
}

.customise-modal .confirm-button:hover {
  color: white;
  background: var(--main-theme-color-dark);
  border: solid var(--main-theme-color-dark);
  padding: 3px 7px;
  margin-top: 7px;
  border-radius: 4px;
  font-weight: bold;
}

.customise-modal .active-button {
  color: white;
  background: var(--main-theme-color-dark);
  border: solid var(--main-theme-color-dark);
  padding: 3px 7px;
  margin-top: 7px;
  border-radius: 4px;
  font-weight: bold;
}

/********************* TRANSCRIPT PAGE *********************/

#transcriptPage .ai-safety {
  margin: 5px 15px;
  font-size: 0.85rem;
  color: grey;
}

#transcriptPage .chat-body {
  flex: 0.5;
}

.user-role-input,
.bot-role-input {
  display: inline-block;
  width: 15%;
  height: 15px;
  margin: 0px 5px;
  padding: 10px 10px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  font-size: 0.75rem;
}

#transcriptPage .chat-input {
  flex: 6;
  display: flex;
  flex-direction: column;
  color: grey;
  background: #fafafa;
  border-radius: 10px 10px 10px 10px;
  margin: 3px 8px 8px 8px;
  border: 1px solid #cccc;
}

#transcriptPage .chat-inputbar {
  flex: 11;
  align-items: flex-start;
  overflow: auto;
  font-size: 0.9rem;
  max-height: 100%;
  position: relative;
  width: 100%;
}

#transcriptPage .chat-toolbar {
  flex: 1;
  border-radius: 0px 0px 10px 10px;
}

/* #transcriptPage .chat-input-sec {
  flex: 1;
  overflow: auto;
  font-size: 0.9rem;
  max-height: 450px;
  position: relative;
  width: 100%;
} */

#transcriptPage .chat-inputbar .transcript-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 5px;
  outline: none;
}


#transcriptPage .chat-inputbar .transcript-input[contenteditable]:empty::before {
  content: "Copy and paste your transcript here...";
  color: gray;
}

.feedback-modal .criteria-score-rating.insufficient_evidence {
  font-size: 1rem;
  font-style: italic;
}

/********************* KEYFRAMES *********************/

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


@keyframes fade-in-right {
  0% {
    transform:  translate(50%);
    opacity: 0;
  }
  100% {
    transform: translate(0%);
    opacity: 1;
  }
}


@keyframes fade-in-left {
  0% {
    transform:  translate(-50%);
    opacity: 0;
  }
  100% {
    transform: translate(0%);
    opacity: 1;
  }
}

@keyframes blink  {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/********************* LOADING INDICATOR FROM LOADING.IO *********************/

@keyframes ldio-1dz5qv682y3-o {
    0%    { opacity: 1; transform: translate(0 0) }
   49.99% { opacity: 1; transform: translate(20px,0) }
   50%    { opacity: 0; transform: translate(20px,0) }
  100%    { opacity: 0; transform: translate(0,0) }
}
@keyframes ldio-1dz5qv682y3 {
    0% { transform: translate(0,0) }
   50% { transform: translate(20px,0) }
  100% { transform: translate(0,0) }
}

.dualBallLoader {
  position: absolute;
  left: 50%;
  top: 50%;
}


.ldio-1dz5qv682y3 div {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-sizing: content-box;
}

.ldio-1dz5qv682y3 div:nth-child(1) {
  background: var(--dark-text-color2);
  animation: ldio-1dz5qv682y3 1s linear infinite;
  animation-delay: -0.5s;
}
.ldio-1dz5qv682y3 div:nth-child(2) {
  background: var(--main-theme-color-dark);
  animation: ldio-1dz5qv682y3 1s linear infinite;
  animation-delay: 0s;
}
.ldio-1dz5qv682y3 div:nth-child(3) {
  background: var(--dark-text-color2);
  animation: ldio-1dz5qv682y3-o 1s linear infinite;
  animation-delay: -0.5s;
}
.loadingio-spinner-dual-ball-ha1jbmuqpsc {
  width: 91px;
  height: 91px;
}
.ldio-1dz5qv682y3 {
  transform: translateZ(0) scale(0.91);
  backface-visibility: hidden;
  transform-origin: 0 0; /* see note above */
}
/* generated by https://loading.io/ */



/********************* USEFUL SETTINGS *********************/

.obfuscate {
  color: transparent;
  text-shadow: 0 0 5px rgba(0,0,0,0.5);
  filter: blur(5px);
}

.obfuscated-score {
  color: grey;
  text-shadow: 0 0 5px rgba(0,0,0,0.5);
  filter: blur(5px);
  background: #bbbbbd;
}

.fa-stack:hover,
.fa-stack:focus,
.fas:hover,
.fas:focus,
.fa-regular:hover,
.fa-regular:focus,
.fa-solid:hover,
.fa-solid:focus,
.closeFeedback:hover,
.closeFeedback:focus,
.close-modal:hover,
.close-modal:focus {
  color: var(--fa-icon-hover-color);
  text-decoration: none;
  cursor: pointer;
}

.header-top .fa-stack:hover,
.header-top .fa-stack:focus,
.header-top .fas:hover,
.header-top .fas:focus,
.header-top .fa-regular:hover,
.header-top .fa-regular:focus,
.header-top .fa-solid:hover,
.header-top .fa-solid:focus {
  color: var(--header-top-fa-icon-hover-color)
}

.nav-container .fa-solid:hover,
.nav-container .fa-solid:focus {
color: var(--main-theme-color-dark);
text-decoration: none;
cursor: pointer;
}

.nav-container .profile-icon img:hover{
  content:url(/static/img/role-pl-ai-profile-icon.png);
}

/* #chatOverlay {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: none;
  background-color: #000;
  opacity: 0.5;
  z-index: 1
} */

#buyCreditsModal {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -200px;
  width: 400px;
  height: max-content;
  background-color: #faeacf;
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 2;
}

#buyCreditsModal .modal-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

#buyCreditsModal .modal-title {
  margin: auto;
}

#buyCreditsModal .close {
  cursor: pointer;
}

#buyCreditsModal .modal-body {
  justify-content: center;
  padding: 10px;
  margin: 10px;
}

#buyCreditsModal .modal-footer {
  margin: 10px 0px;
}

#buyCreditsModal .modal-footer #buyCreditsButton {
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 10px;
  color: white;
  background-color: var(--main-theme-color-dark);
}

#buyCreditsModal .modal-footer #buyCreditsButton:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#iFrameOverlay {
  /* background-color: rgba(193, 193, 194, 0.5); */
  background-color: white !important;
  opacity: 1 !important;
  top: calc(10% * 7.88) !important;
  max-height: calc(100% - calc(10% * 7.88)) !important;
  z-index: 1;
}

#iFrameOverlay,
#formOverlay,
#notesOverlay,
#assistantOverlay,
#transcriptOverlay,
#chatOverlay,
#learnerInputOverlay,
#chatCreditsOverlay,
#indexOverlay,
#overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  background-color: #c1c1c2;
  opacity: 0.5;
  z-index: 1
}

#iFrameOverlay.show-overlay {
  display: flex;
  justify-content: center;
  align-items: center;
}

#chatOverlay.show-overlay,
#notesOverlay.show-overlay,
#formOverlay.show-overlay {
  display: block;
}

#chatOverlay.readonly-chat,
#notesOverlay.readonly-chat {
  opacity: 0.25;
  pointer-events: none;
}

.chat-container .chat-header.readonly-chat,
.chat-container .info-messages.readonly-chat,
.chat-container .chat-info.readonly-chat,
.chat-container .chat-input.readonly-chat{
  pointer-events: none;
}

.chat-container .chat-body .editMessageIcon.readonly-chat {
  pointer-events: none;
}

.spinning-icon {
  position: fixed;
  /* left: 45%;
  top: 40%; */
  left: 50%;
  top: 50%;
  z-index: 2;
  color: var(--main-theme-color-dark);
}

.spinning-icon img {
  width: 30%;
}


/*****************************************************************************/
/***************************** TERMS OF USE SETTINGS *************************/
/*****************************************************************************/

#termsPage, #privacyPage {
  padding: 0% 10%
}

#termsPage hr, #privacyPage hr {
  border: 0.5px solid #c9c9e4;
}

#termsPage .landing-header h3,
#privacyPage .landing-header h3,
#termsPage .landing-header h4,
#privacyPage .landing-header h4 {
  text-align: center;
}

#termsPage .landing-header a,
#privacyPage .landing-header a {
  margin-left: auto;
  background-color:  var(--main-theme-color-dark);
  color: white;
  padding: 10px;
  border-radius: 7px;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.2rem;
}

#termsPage .landing-header a:hover,
#privacyPage .landing-header a:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#termsPage .terms-body, #privacyPage .terms-body {
  padding-top: 10px;
  display: flex;
  flex-direction: row;
}

.terms-body .terms-nav {
  display: flex; 
  flex-direction: column;
  flex: 1;
  font-size: 0.9rem;
  text-align: center;
}

.terms-body .terms-nav a {
  padding: 5px 10px;
  background: #f1dab4;
  border-radius: 7px;
  margin: 5px;
  text-decoration: none;
  font-weight: bold;
  color: var(--dark-text-color2);
}

.terms-body .terms-nav a:hover {
  background-color: #f0cd94;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.terms-body .terms-of-use {
  flex: 4;
  margin-left: 20px;
}

.terms-body .terms-of-use .term {
  padding: 10px 0px;
}

.terms-body .terms-of-use p {
  padding: 10px 0px;
}


#termsPage ol,
#termsPage ul,
#privacyPage ul {
  margin: 0;
  padding: 0;
  padding-left: 25px
}

#termsPage li,
#privacyPage li {
  margin-top: 15px;
}
#termsPage ul ul,
#termsPage ul ol,
#privacyPage ul ul,
#privacyPage ul ol { 
  padding-left: 50px; 
}

#termsPage ul ol li,
#privacyPage ul ol li {
  list-style-type: lower-roman; 
}

#privacyPage tr th {
background-color: white;
}

#privacyPage tr:nth-child(even) {
  background-color: #edf7f4;
}

#privacyPage tr:nth-child(odd) {
  background-color: #f2f9fb;;
}

#privacyPage table tbody tr:hover {
  background-color: initial; 
}

@media screen and (max-width: 400px) {

  #privacyPage .home-title,
  #termsPage .home-title {
    display: flex;
    flex-direction: column;
  }

  #termsPage .terms-body, #privacyPage .terms-nav {
    flex-direction: column;
  }

  #termsPage .terms-body, #privacyPage .terms-body {
    padding-top: 10px;
    display: flex;
    flex-direction: column;
  }

  #termsPage .landing-header a,
  #privacyPage .landing-header a {
    margin: auto;
    margin-bottom: 5px;
}
}

/*****************************************************************************/
/***************************** ASSISTANT PAGE *************************/
/*****************************************************************************/

#customiseFeedbackModal #feedbackCriteriaGroupSelect,
#customiseScenarioModal #scenarioSelect {
  margin: 5px;
}

#customiseFeedbackModal p,
#customiseScenarioModal p {
  font-size: 0.9rem;
  font-style: italic;
  margin-top: 5px;
}

#customiseScenarioModal .customise-scenario-options {
  display: flex;
  justify-content: center;
}

#customiseScenarioModal .customise-scenario-options input {
  margin: 10px 10px 0px 10px;
}

#chatPage .assistant-container {
  flex: 6
}

.assistant-container .header-top,
.assistant-container input:checked + .slider {
  background: var(--assistant-header-top-color);
  border-bottom: solid 2px var(--assistant-header-top-color);
}

.assistant-container .circle,
.assistant-container .header-bottom {
  background: var(--assistant-mic-icon-circle-color);
  border-bottom: solid 2px var(--assistant-mic-icon-circle-color);
}

.assistant-container .circle i {
  color: var(--assistant-mic-icon-color);
}

.assistant-container .design-options{
  margin-left: auto;
  margin-right: auto;
}

.assistant-container .design-options > button {
  background: #dadef1;
  padding: 5px 8px;
  border-radius: 5px;
  margin: 10px;
  border: none;
  font-size: 1.1rem;
}

.assistant-container .chat-body .assistant-update-message {
  margin: 10px 15px;
  font-style: italic;
}

.assistant-container .chat-body .assistant-update-message i {
  color: var(--main-theme-color-dark)
}


.assistant-container .chat-info .chat-status .recording-status > .circle {
  background-color: var(--assistant-header-top-color);
}

.assistant-container .chat-info .chat-status .recording-status {
  color: var(--assistant-header-top-color);
}

.form-header .header-top {
  padding: 1%
}

#chatPage .form-container {
  overflow: auto;
}

#chatPage .form-container .title-container {
  display: flex;
}

#chatPage .form-container .form-body {
  overflow: auto;
  padding: 10px;
}


#chatPage .form-container .updated {
  box-shadow: 0 4px 6px 0 orange, 0 6px 6px 0 orange;
}

.scenario-last-modified {
  background: var(--form-header-chip-color);
  color: var(--assistant-header-top-color);
  font-size: 1rem;
  width: max-content;
  border-radius: 5px;
  padding: 3px 6px;
  font-style: italic;
  margin-left: 15px;
}

#scenarioLastModifiedDt {
  font-weight: normal;
}

/*****************************************************************************/
/***************************** REPORT PAGE *************************/
/*****************************************************************************/

.report-body .loading {
  display: flex;
  align-items: center;
  justify-content: center;
}

.report-body .loading p {
  margin-left: 10px;
  color: grey
}

.report-body {
  display: flex;
}

.report-body .left-container {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.report-body .right-container {
  flex: 1;
}

#creatorSettingsPage .form-group,
#analyseFeedbackPage .form-group {
  margin-bottom: 10px;
}

.report-body .form-group input,
.report-body .form-group select {
  width: 95%;
}

.results-container {
  margin-left: 10px
}

.www-container, .wcbi-container {
  margin: 10px;
}

.www-list, .wcbi-list {
  margin-left: 30px;
}

.www-container ul, .wcbi-container ul {
  list-style: none; /* Remove default bullets */
}

.www-container ul li::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: rgb(16, 168, 125);
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1em; /* Also needed for space (tweak if needed) */
  margin: 5px; /* Also needed for space (tweak if needed) */
}

.wcbi-container ul li::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: red;
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1em; /* Also needed for space (tweak if needed) */
  margin: 5px; /* Also needed for space (tweak if needed) */
}


@media screen and (max-width: 400px) {

  .report-body {
    flex-direction: column;
  }

}

/*****************************************************************************/
/***************************** EMAILS *************************/
/*****************************************************************************/
 
.email-text {
  font-family: sans-serif;
  text-align: center;
}

.email-icon {
  width: 70px;
}

.email-button {
  background:var(--main-theme-color-dark);
  color: white;
  padding: 7px 10px;
  border-radius: 7px;
  text-decoration: none;
  font-weight: bold;
}

.center-text {
  text-align: center;
}

.bold-text {
  font-weight: bold;
}

.email-preview-box {
  border: 0.5px solid rgb(223, 223, 226);
  border-radius: 7px;
  margin: 5px;
  background: #fdfbf9;
}

.email-preview-title {
  margin: 3px;
  font-style: italic;
  font-weight: bold
}

.email-preview-header {
  margin: 8px;
}

.margin10 {
  margin: 10px;
}

.form-container:has(#planningToolkitForm) {
  flex: 8;
}

#planningToolkitForm .ltop-container {
  margin-bottom: 60px;
}

#planningToolkitForm .ltop-container .form-group input {
  width: 100%;
}

#planningToolkitForm .ltop-container .ltop-inputs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

#planningToolkitForm #LTOP {
  width: 80%;
  height: 150px;
  position: relative;
  margin: 20px auto;
}
#planningToolkitForm #LTOP .line {
  position: absolute;
  height: 2px;
  background-color: var(--main-theme-color-dark);
  top: 50%;
  width: 100.2%;
}
#planningToolkitForm #LTOP .marker {
  position: absolute;
  width: 2px;
  height: 30px;
  background-color: var(--main-theme-color-dark);
  top: calc(50% - 30px);
}

#planningToolkitForm #LTOP .top-marker {
height: 35px;
top: calc(50% - 35px);
}

#planningToolkitForm #LTOP .bottom-marker {
height: 30px;
top: calc(50%);
}

#planningToolkitForm #LTOP .label {
  position: absolute;
  transform: translateX(-50%);
  text-align: center;
  width: 100px;
  white-space: nowrap;
  font-size: 14px;
}

#planningToolkitForm #LTOP .top-label {
bottom: 70%;
margin-bottom: 5px;
border: 2px solid var(--main-theme-color-dark);
width: fit-content;
padding: 5px;
}

#planningToolkitForm #LTOP .bottom-label {
top: 70%;
margin-top: 5px;
}

#planningToolkitForm #LTOP #openingPositionMarker {
height: 5px;
top: calc(50% - 5px);
}

#planningToolkitForm #LTOP #openingPositionLabel {
bottom: 50%;
}

#planningToolkitForm #LTOP #negotiableRangeLabel {
top: 95%;
}

#planningToolkitForm #LTOP #arrow {
  position: absolute;
  top: 85%;
  height: 20px;
}
#planningToolkitForm #LTOP input {
  width: 100px;
  margin-right: 10px;
}

#planningToolkitForm #LTOP .ltop-extra textarea {
  height: 75px;
  overflow-y: scroll;
}

#planningToolkitForm tr:nth-child(even) {
background-color: initial;
}

#planningToolkitForm textarea {
resize: none !important;
padding: 5px;
}

#planningToolkitForm .base-shape-container,
#planningToolkitForm .adjusters-container,
#planningToolkitForm .issue-map-container,
#planningToolkitForm .concession-matrix-container,
#planningToolkitForm .information-matrix-container,
#planningToolkitForm .background-statement-container {
border: solid 1px var(--main-theme-color-dark);
margin: 10px 10px 30px 10px;
padding: 10px;
width: max-content;
}

#planningToolkitForm .background-statement-container {
  width: initial;
}

#planningToolkitForm #issueMapList, #planningToolkitForm #backgroundStatementList {
list-style-type: none;
padding: 0 10px;
}

#planningToolkitForm #issueMapList li, #planningToolkitForm #backgroundStatementList li {
display: flex;
align-items: center;
margin-bottom: 10px;
}

#planningToolkitForm #LTOP .ltop-extra textarea,
#planningToolkitForm #backgroundStatementFull textarea,
#planningToolkitForm #backgroundStatementList li textarea {
  width: 100%;
}

#planningToolkitForm #backgroundStatementFull textarea {
  height: 150px;
  overflow-y: scroll;
}

#planningToolkitForm #issueMapList .remove-item, #planningToolkitForm #backgroundStatementList .remove-item {
margin-left: 5px;
}

#planningToolkitForm .adjusters-container, #planningToolkitForm .concession-matrix-container, #planningToolkitForm .information-matrix-container {
width: 150%;
}

#planningToolkitForm #concessionMatrix,
#planningToolkitForm #informationMatrix {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 10px;
margin: 10px;
padding: 10px;
}

#planningToolkitForm #concessionMatrix > div,
#planningToolkitForm #informationMatrix > div {
border: 1px solid #ddd;
padding: 10px;
display: flex;
flex-direction: column;
}

#planningToolkitForm #concessionMatrix h4,
#planningToolkitForm #informationMatrix h4 {
margin-top: 0;
margin-bottom: 10px;
}

.feedback-modal .feedback-section-content {
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

#planningToolkitForm #concessionMatrix ul,
#planningToolkitForm #informationMatrix ul {
list-style-type: none;
padding: 0;
margin: 0;
flex-grow: 1;
}

#planningToolkitForm #concessionMatrix li,
#planningToolkitForm #informationMatrix li {
display: flex;
margin-bottom: 5px;
align-items: flex-start;
}

#planningToolkitForm #concessionMatrix textarea,
#planningToolkitForm #informationMatrix textarea {
flex-grow: 1;
width: calc(100% - 70px);
padding: 5px;
min-height: 30px;
overflow-y: hidden;
}

#planningToolkitForm #concessionMatrix button.remove-item,
#planningToolkitForm #informationMatrix button.remove-item {
width: 60px;
margin-left: 5px;
}

#planningToolkitForm #concessionMatrix button.add-item,
#planningToolkitForm #informationMatrix button.add-item {
margin-top: 10px;
}

#planningToolkitForm #concessionMatrix div, #planningToolkitForm #informationMatrix div {
border: solid 1px var(--main-theme-color-dark);
padding: 5px;
}

#planningToolkitForm #concessionMatrix div ul, #planningToolkitForm #informationMatrix div ul {
list-style-position: inside;
padding-left: 0;
}

#planningToolkitForm .add-item {
  width: max-content;
  align-self: flex-end;
  border-radius: 3px;
  text-align: center;
  padding: 5px 7px;
  font-size: 1rem;
  font-weight: bold;
  border: solid 0.5px var(--main-theme-color-dark);
  background: white;
  color: var(--main-theme-color-dark);
  align-self: flex-start;
}

#planningToolkitForm .add-item i {
color: var(--main-theme-color-dark);
}

#planningToolkitForm .remove-item {
border: none;
background: none;
color: red;
}

#planningToolkitForm .remove-item .fa-circle-xmark {
color: red;
}

#planningToolkitForm button[type="submit"] {
width: max-content;
align-self: flex-end;
border-radius: 3px;
text-align: center;
padding: 5px 7px;
font-size: 1rem;
font-weight: bold;
border: none;
background: var(--main-theme-color-dark);
color: white;
align-self: flex-start;
}


#chatPage .iframe-registration-container {
  background: white;
}

.token-embed {
  margin-left: 30px;
}

.token-embed pre {
  background-color: #f4f4f4;
  border: 1px solid #ddd;
  border-left: 3px solid #f36d33;
  color: #666;
  page-break-inside: avoid;
  font-family: monospace;
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 1.6em;
  max-width: 100%;
  overflow-x: auto;
  padding: 0.8em 1em;
  display: block;
  word-wrap: break-word;
}

/* Inline code */
.token-embed code {
  background-color: #f4f4f4;
  border-radius: 3px;
  color: #666;
  font-family: monospace;
  font-size: 0.9em;
  padding: 0.2em 0.4em;
}

/*****************************************************************************/
/***************************** WIZARD *************************/
/*****************************************************************************/

/* Base Layout */
.wizard-container .card {
  margin: 20px 5px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.wizard-container textarea {
  resize: none;
}

.wizard-container .fa-solid:hover,
.wizard-container .fa-solid:focus {
  color: inherit;
}

.wizard-container[data-wizard-type="feedback"] .wizard-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 20px;
  margin-top: 20px;
}

.wizard-container[data-wizard-type="scenario"] .wizard-layout {
  display: flex;
  flex-direction: row;
  gap: 30px;
  position: relative;
}

/* Header Styles */
.wizard-container .header {
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
  padding-bottom: 15px;
}

.wizard-container[data-wizard-type="scenario"] .header-content {
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
}

.wizard-container[data-wizard-type="scenario"] .header-content .actions {
  padding: 0;
}

.wizard-container .header-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.wizard-container .group-name {
  font-size: 1.25rem;
  padding: 10px;
  border: 1px solid #e9ecef;
  border-radius: 4px;
}

/* Form Elements */
.wizard-container .form-group,
.wizard-container .form-check {
  margin-bottom: 1.5rem;
}

/* .wizard-container .form-group label,
.wizard-container .form-check label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: #495057;
} */

.wizard-container .form-group {
  width: 100%;
  height: fit-content;
}

.wizard-container #scenarioComponents {
  margin-bottom: 1.5rem;
}

.wizard-container .component-value-container {
  display: flex;
  align-items: center;
  width: 100%;
}

.wizard-container .component-value-container .delete-component-btn {
  align-self: flex-start;
  margin-left: 5px;
  background: none;
  border: none;
  color: red;
}

.wizard-container .ai-input .form-group {
  margin-bottom: 0;
}

.wizard-container .ai-input textarea {
  min-height: 100px;
  max-height: 200px;
  overflow-y: auto;
  resize: none; /* Prevent manual resizing since we're handling it */
  transition: height 0.2s ease;
}

.wizard-container .form-control {
  border: 1px solid #ced4da;
  border-radius: 4px;
  padding: 0.5rem;
  width: 100%;
  transition: border-color 0.15s ease-in-out;
}

.wizard-container .form-control:focus {
  border-color: var(--main-theme-color-dark);
  box-shadow: 0 0 0 0.2rem rgba(202, 77, 1, 0.25);
}

/* Required Field Styles */
.wizard-container .form-group label.required::after {
  content: "*";
  color: var(--main-theme-color-dark);
  margin-left: 4px;
}

.wizard-container .form-control.required,
.wizard-container .form-select.required {
  border-left: 3px solid var(--main-theme-color-dark);
}

/* Criteria Items */
.wizard-container .wizard-item-list {
  list-style: none;
}

.wizard-container .wizard-item {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 15px;
  margin: 20px 0;
  transition: box-shadow 0.3s ease;
}

.wizard-container .wizard-item:hover {
  box-shadow: 0 6px 10px rgba(0.1,0.2,0.2,0.3);
  border: 1px solid #bac0c6
}

/* Messages */
.wizard-container .message-container {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  width: 100%;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.wizard-container .message-container .alert {
  width: 100%;
  padding: 15px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  animation: slideIn 0.3s ease-out;
}

.wizard-container .message-container .alert-success {
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
  color: #155724;
}

.wizard-container .message-container .alert-error {
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  color: #721c24;
}

@keyframes slideIn {
  from {
      transform: translateY(-100%);
      opacity: 0;
  }
  to {
      transform: translateY(0);
      opacity: 1;
  }
}

.wizard-container.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.wizard-container .loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.wizard-container .loading {
  width: 2rem;
  height: 2rem;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.wizard-container .loading-text {
  color: #666;
  font-size: 1rem;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Button Styles */
.wizard-container .cancel-edit-btn,
.wizard-container .save-character-btn,
.wizard-container .save-criteria-btn,
.wizard-container .remove-criteria-btn,
.wizard-container .remove-character-btn {
  width: max-content;
  border-radius: 3px;
  text-align: center;
  padding: 5px 7px;
  font-size: 1rem;
  font-weight: bold;
}

.wizard-container .remove-character-btn,
.wizard-container .remove-criteria-btn {
  color: var(--gray-900);
}

.wizard-container .actions button {
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
  white-space: nowrap; /* Prevent text wrapping */
}

.wizard-container .btn-secondary {
  background-color: white;
  border: 1px solid var(--main-theme-color-dark);
  color: var(--main-theme-color-dark);
}

.wizard-container .btn-primary {
  background-color: var(--main-theme-color-dark);
  border: 1px solid var(--main-theme-color-dark);
  color: white;
}

.wizard-container button:disabled {
  cursor: not-allowed;
  pointer-events: none;
  border: solid 0.5px rgb(106, 102, 102);
  background: rgb(210, 208, 208);
  color: rgb(106, 102, 102);
  cursor: not-allowed;
}

.wizard-container button:disabled:hover {
  background-color: inherit;
  color: inherit;
}

/* Action Containers */
.wizard-container .actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap; /* Prevent wrapping */
  gap: 10px;
  padding: 10px 0;
}

.wizard-container .actions.right-only {
  justify-content: flex-end;
}

.wizard-container .left-actions,
.wizard-container .right-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: nowrap; /* Prevent wrapping */
}

.wizard-container .left-actions {
  flex: 1;
}

.wizard-container .bottom-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 20px 0px 10px 0px;
  border-top: 1px solid #eee;
  margin-top: 20px;
  width: 100%;
}

/* Alert Styles */
.wizard-container .alert {
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 4px;
  animation: fadeIn 0.3s ease-in;
}

.wizard-container .alert-success {
  background-color: #d4edda;
  border-color: #c3e6cb;
  color: #155724;
}

.wizard-container .alert-error {
  background-color: #f8d7da;
  border-color: #f5c6cb;
  color: #721c24;
}

/* Loading Animation */
.wizard-container .loading {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  border-top-color: #fff;
  margin-right: 0.5rem;
}

/* Contents Navigation */
.wizard-container .wizard-contents {
  border-right: 1px solid #e9ecef;
  padding-right: 15px;
  display: none;
}

.wizard-container .wizard-contents.has-criteria {
  display: block;
}

.wizard-container .contents-sticky {
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  background: white;
  padding: 15px;
  border-radius: 4px;
  border: 1px solid #e9ecef;
}

.wizard-container .contents-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.wizard-container .contents-list li {
  margin: 8px 0;
}

.wizard-container .contents-list a {
  color: var(--dark-text-color1);
  text-decoration: none;
  display: block;
  padding: 5px 10px;
  border-radius: 4px;
  transition: all 0.2s ease;
  font-size: 0.9rem;
}

.wizard-container .contents-list a:hover,
.wizard-container .contents-list a.active {
  background-color: var(--main-theme-color-light);
  color: var(--main-theme-color-dark);
}

/* Form Select */
.wizard-container .left-actions .form-select {
  min-width: 200px;
  border: 1px solid var(--main-theme-color-dark);
  color: var(--main-theme-color-dark);
  padding: 5px 7px;
  border-radius: 3px;
  font-weight: bold;
}

.wizard-container .left-actions .form-select:hover {
  background-color: var(--main-theme-color-light);
}

.wizard-container .left-actions .form-select:focus {
  border-color: var(--main-theme-color-dark);
  box-shadow: 0 0 0 0.2rem rgba(202, 77, 1, 0.25);
}

/* Criteria Actions */
.wizard-container .item-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
}

/* Other action buttons */
.wizard-container .item-actions .improve-btn,
.wizard-container .item-actions .save-criteria-btn {
  margin-right: 10px; /* Add some space between buttons */
}

/* Delete Button */
.wizard-container .item-actions .delete-btn {
  margin-left: auto; /* This pushes the button to the right */
  background-color: white;
  border: 1px solid red;
  color: red;
  padding: 5px 10px;
  border-radius: 3px;
  transition: all 0.2s ease;
}

.wizard-container .criteria-actions .delete-btn:hover {
  background-color: red;
  color: white;
}


/* Main Content Area */
.wizard-container .wizard-main {
  grid-column: 1 / -1;
}

.wizard-container .wizard-contents.has-criteria + .wizard-main {
  grid-column: 2;
}

/* Responsive Styles */
@media (max-width: 992px) {
  .wizard-layout {
    grid-template-columns: 1fr;
  }
  
  .wizard-container .wizard-contents {
    display: none;
  }
}

@media (max-width: 768px) {
  .wizard-container .wizard-layout {
    grid-template-columns: 1fr;
  }
  
  .wizard-container .wizard-contents {
    display: none;
  }
  
  .wizard-container .actions {
    flex-direction: column;
    align-items: stretch;
  }

  .wizard-container .left-actions,
  .wizard-container .right-actions {
    width: 100%;
  }

  .wizard-container .left-actions {
    flex-direction: column;
  }

  .wizard-container .actions button {
    width: 100%;
    justify-content: center;
  }
}

/* Update these existing styles */
.wizard-container .actions button,
.wizard-container .left-actions .form-select {
    height: 38px; /* Set a fixed height */
    padding: 0 12px; /* Adjust horizontal padding as needed */
    line-height: 36px; /* Adjust line height to vertically center text */
    font-size: 1rem; /* Ensure consistent font size */
}

/* Adjust the icon alignment in buttons */
.wizard-container .actions button .icon {
    display: inline-flex;
    align-items: center;
    height: 100%;
}

/* Ensure the select arrow aligns properly */
.wizard-container .left-actions .form-select {
    padding-right: 30px; /* Make room for the dropdown arrow */
    appearance: none; /* Remove default styling */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%23000' d='M0 0l4 4 4-4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 8px;
}

/* Adjust styles for better mobile responsiveness */
@media (max-width: 768px) {
    .wizard-container .actions button,
    .wizard-container .left-actions .form-select {
        height: 44px; /* Slightly taller on mobile for better touch targets */
        line-height: 42px;
    }
}

/* Progress Steps */
.wizard-container .wizard-progress {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 30px 0;
  padding: 0 20px;
}

.wizard-container .wizard-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  flex: 1;
  padding: 10px;
  transition: all 0.3s ease;
  z-index: 1; /* Ensure step is above connector */
  position: relative;
}

.wizard-step::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 8px;
  pointer-events: none;
  transition: all 0.2s ease;
}

.wizard-container .wizard-step:not(.active):hover .step-icon {
  background-color: var(--main-theme-color-light);
  border-color: var(--main-theme-color-dark);
  color: var(--main-theme-color-dark);
}

.wizard-container .wizard-step:not(.active):hover .step-label {
  color: var(--main-theme-color-dark);
}

.wizard-container .wizard-step.completed .step-icon {
  background: var(--main-theme-color-dark);
  border-color: var(--main-theme-color-dark);
  color: white;
}

.wizard-container .wizard-step.future .step-icon {
  background: #f8f9fa;
  border-color: #e9ecef;
  color: #6c757d;
}

.wizard-container .wizard-step.future .step-label {
  color: #6c757d;
}

.wizard-container .wizard-step.active {
  cursor: default;
}

.wizard-container .wizard-step:not(.active) {
  cursor: pointer;
}

.wizard-container .wizard-step.clickable {
  cursor: pointer;
}

.wizard-container .wizard-step.clickable:hover {
  background-color: var(--main-theme-color-light);
  border-radius: 8px;
}

.wizard-container .wizard-step.clickable.completed .step-icon {
  border-color: var(--main-theme-color-dark);
}

.wizard-container .step-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f8f9fa;
  border: 2px solid #e9ecef;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  transition: all 0.3s ease;
}

.wizard-container .wizard-step.active .step-icon {
  background: none;
  border-color: var(--main-theme-color-dark);
  color: var(--main-theme-color-dark);
}

.wizard-container .wizard-step.completed .step-icon {
  background: var(--main-theme-color-dark);
  border-color: var(--main-theme-color-dark);
  color: white;
}

.wizard-container .step-label {
  font-size: 0.9rem;
  color: #6c757d;
  text-align: center;
  transition: all 0.3s ease;
  white-space: nowrap; /* Prevent label wrapping */
}

.wizard-container .wizard-step.active .step-label {
  color: var(--main-theme-color-dark);
  font-weight: 500;
}

.wizard-container .wizard-step.clickable.completed .step-label {
  color: var(--main-theme-color-dark);
}

.wizard-container .wizard-step.clickable:hover .step-label {
  font-weight: 500;
}

/* Step connector line */
.wizard-container .step-connector {
  flex: 1;
  height: 2px;
  background: #e9ecef;
  margin: 0 15px;
  position: relative;
  top: -20px; /* Align with step icons */
  transition: all 0.3s ease;
}

/* Update connector colors based on progress */
.wizard-container .wizard-step.completed + .step-connector {
  background: var(--main-theme-color-dark);
}

.wizard-container.loading {
  position: relative;
}

.wizard-container.loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.7);
  z-index: 1000;
}

/* Step Content */
.wizard-container .wizard-step-content {
  display: grid;
  gap: 30px;
  padding: 20px 0;
  transition: opacity 0.3s ease-in-out;
}

.wizard-container .wizard-step-content.hide {
  display: none;
}

.wizard-container .wizard-step-content:has(.testing-layout) {
  padding: 0px;
  margin-bottom: 0px;
  height: 100%;
}

/* Form Sections */
.wizard-container .form-section {
  background: white;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

.wizard-container .form-section:has(.testing-layout) {
  padding: 0px;
  margin-bottom: 0px;
}

.wizard-container .form-section h3 {
  margin-bottom: 20px !important;
}

.wizard-container.form-group {
  margin-bottom: 1.5rem;
  width: 100%;
}

/* Input with AI Button */
.wizard-container .input-with-ai {
  display: flex;
  gap: 10px;
  width: 100%;
  align-items: flex-start;
}

.wizard-container .input-with-ai .form-control {
  flex: 1;
  min-width: 0;
}

.wizard-container .input-with-ai .ai-suggest {
  background: none;
  border: none;
  color: var(--main-theme-color-dark);
  padding: 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.wizard-container .input-with-ai button.ai-suggest {
  flex-shrink: 0;
  width: 40px;
  padding: 0.375rem;
  background: none;
  border-radius: 0.25rem;
  color: #6c757d;
  align-self: flex-start
  ;
}

.wizard-container .input-with-ai .ai-suggest:hover {
  background: var(--main-theme-color-light);
}

.wizard-container .input-with-ai button.ai-suggest:hover {
  background-color: #f8f9fa;
  color: #0d6efd;
}

.wizard-container .input-with-ai textarea.form-control {
  min-height: 120px;
  resize: vertical;
}

/* Scenario Cards */
.wizard-container .character-container,
.wizard-container .scenario-suggestions {
  /* display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); */
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px 0;
}

.wizard-container .character-container {
  width: 100%;
}

.wizard-container .character-card,
.wizard-container .scenario-card {
  background: white;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 20px;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
}

.wizard-container .character-card {
  flex-direction: row;
}

.wizard-container .character-edit-form, .wizard-container .criteria-edit-form {
  width: 100%;
}

.wizard-container .character-card:hover,
.wizard-container .scenario-card:hover {
  border-color: var(--main-theme-color-dark);
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.wizard-container .character-card .character-header img {
  max-width: 100px;
  height: 70px;
}

.wizard-container .character-card .title {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.wizard-container .character-card .title .attribute {
  background: var(--main-theme-color-dark);
  color: white;
  padding: 3px 5px;
  border-radius: 10px;
  margin-left: 10px;
  font-size: 0.8rem;
}

.wizard-container .character-card h3,
.wizard-container .scenario-card h3 {
  font-size: 1.1rem;
  margin: 0;
  color: #212529;
}

.wizard-container .character-card p,
.wizard-container .scenario-card p {
  color: #6c757d;
  margin: 0;
  flex: 1;
  white-space: pre-wrap;
}

.wizard-container .character-card .character-actions button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}

.wizard-container .character-card .character-actions .tooltip {
  position: absolute;
  right: 120%;
  opacity: 1;
}

.wizard-container .character-card .character-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-left: auto;
}

.wizard-container .matched-criteria {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wizard-container .criteria-badge {
  background: var(--main-theme-color-light);
  color: var(--main-theme-color-dark);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.85rem;
}

/* Preview Panel */

.wizard-container .preview-panel {
  background: white;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  transition: opacity 0.3s ease-in-out;
  opacity: 1;
}

.wizard-container .preview-panel.hide {
  display: none;
}

.wizard-container preview-header {
  padding: 15px 20px;
  border-bottom: 1px solid #e9ecef;
}

.wizard-container .preview-header h3 {
  font-size: 1rem;
  margin: 0;
  color: #495057;
}

.wizard-container .preview-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  background: #f8f9fa;
}

/* When preview is hidden */
.wizard-container .wizard-layout.no-preview .preview-panel {
  display: none;
}

.wizard-container .wizard-layout.no-preview {
  grid-template-columns: 1fr;
}

/* Navigation */
.wizard-container .wizard-navigation {
  display: flex;
  justify-content: space-between;
  padding-top: 30px;
  border-top: 1px solid #e9ecef;
  margin-top: 30px;
  gap: 15px;
}

.wizard-container .wizard-prev,
.wizard-container .wizard-next,
.wizard-container .wizard-skip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 4px;
  font-weight: 500;
  transition: all 0.2s ease;
}

/* When only next button is showing, align to right */
.wizard-container .wizard-navigation.next-only {
  justify-content: flex-end;
}

.wizard-container .wizard-skip {
  margin-left: auto; /* Push to right if prev button is hidden */
}

.wizard-container .wizard-prev:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Improvement Sections */
.wizard-container .improve-section {
  margin-top: 15px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 4px;
  border: 1px solid #e9ecef;
  width: 100%;
}

.wizard-container .improve-section[style*="display: none"] {
  display: none !important;
}

/* Responsive Adjustments */
@media (max-width: 1200px) {
  .wizard-container .wizard-layout {
      grid-template-columns: 1fr;
  }

  .wizard-container .preview-panel {
      height: 400px;
      position: static;
  }
}

/* Responsive adjustments */
@media (max-width: 576px) {
  .wizard-container .wizard-progress {
      flex-direction: column;
      padding: 0;
      gap: 10px;
  }

  .wizard-container .wizard-step {
      flex-direction: row;
      width: 100%;
      justify-content: flex-start;
      gap: 15px;
      padding: 5px 15px;
  }

  .wizard-container .step-icon {
      margin-bottom: 0;
  }

  .wizard-container .step-label {
      text-align: left;
  }

  .wizard-container .step-connector {
      width: 2px;
      height: 20px;
      margin: 0;
      position: absolute;
      left: 29px; /* Center with step icon */
      top: auto;
  }
}

.wizard-container .testing-layout {
  display: grid;
  grid-template-columns: 1.1fr 2fr;
  gap: 1rem;
  height: 100%;
  max-height: 100%; /* Enforce maximum height */
  overflow: hidden; /* Prevent container expansion */
}

.wizard-container .chat-preview-container {
  border: 1px solid #ddd;
  border-radius: 8px;
  height: 100%;
  max-height: 100%; /* Enforce maximum height */
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.wizard-container .chat-preview-frame {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.wizard-container .test-conversation-controls {
  padding: 10px;
  background-color: #f8f9fa;
  border-bottom: 1px solid #ddd;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.wizard-container .test-conversation-controls .current-conversation {
  flex: 1;
  font-size: 0.9rem;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wizard-container .test-conversation-controls .load-conversation {
  display: flex;
  gap: 5px;
  flex: 2;
}

.wizard-container .test-conversation-controls .load-conversation input {
  flex: 1;
  min-width: 200px;
  padding: 5px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 0.9rem;
}

.wizard-container .test-conversation-controls .refresh-conversation {
  display: flex;
  justify-content: flex-end;
}

.wizard-container .test-conversation-controls button {
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.wizard-container .test-conversation-controls button:hover {
  opacity: 0.9;
}

.wizard-container #startHighlighting.active {
  background-color: #ffd700;
  color: #000;
}

.wizard-container .feedback-panel {
  display: flex;
  flex-direction: column;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1rem;
  background: #fff;
  height: 100%;
  max-height: 100%; /* Enforce maximum height */
  overflow: hidden; /* Prevent panel expansion */
}

.wizard-container .feedback-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.wizard-container .highlights-container {
  flex: 1;
  min-height: 0;
  overflow-y: auto; /* Enable vertical scrolling */
  margin: 1rem 0;
  padding-right: 0.5rem;
  /* Add some spacing at the bottom of scrollable area */
  padding-bottom: 1rem;
}

/* Highlighting styles */
.wizard-container .highlightable {
  position: relative;
  cursor: pointer;
}

.wizard-container .no-highlights-message {
  text-align: center;
  color: #666;
  padding: 2rem;
  font-style: italic;
}

.wizard-container .highlight-header {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}

.wizard-container .highlight-item {
  position: relative;
  padding: 12px;
  margin-bottom: 12px;
  border-radius: 6px;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
}

.wizard-container .highlight-text {
  flex-grow: 1;
  font-style: italic;
  color: #495057;
}

.wizard-container .remove-highlight {
  padding: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: #adb5bd;
  font-size: 20px;
  cursor: pointer;
  border-radius: 50%;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.wizard-container .remove-highlight:hover {
  background: #e9ecef;
  color: #495057;
}

.wizard-container.highlight-feedback {
  width: 100%;
  padding: 8px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  margin-bottom: 8px;
  resize: vertical;
}

.wizard-container.highlight-source {
  font-size: 0.875em;
  color: #6c757d;
}


.wizard-container .highlight-feedback {
  width: 100%;
  margin: 0.5rem 0;
  padding: 0.5rem;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  resize: none;
}

.wizard-container .highlight-source {
  font-size: 0.875rem;
  color: #666;
}

/* Highlight mode styles */


  .highlight-popup {
      position: fixed !important;
      z-index: 10000 !important;
  }
  
  .flag-button:hover {
      background: #f0f0f0 !important;
  }


/* Different styles for conversation vs feedback highlights */
.highlight-item.conversation-highlight {
  border-left: 4px solid #007bff;
}

.highlight-item.feedback-highlight {
  border-left: 4px solid #28a745;
}

.feedback-panel.highlight-mode .criteria-container {
  cursor: text;
}

.feedback-panel:not(.highlight-mode) {
  cursor: default;
  user-select: none;
}


.chat-container .highlight-mode .chat-preview-container {
  position: relative;
}

.chat-container .highlight-mode .chat-preview-container::after {
  content: "Highlight message to improve";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 8px;
  background: rgba(255, 215, 0, 0.2);
  text-align: center;
  font-size: 14px;
  border-bottom: 1px solid #ddd;
}

.chat-container .highlightable {
  position: relative;
  transition: all 0.2s ease;
}


.chat-container .highlight-popup {
  position: absolute;
  background: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  padding: 4px;
  z-index: 1000;
  pointer-events: auto; /* Ensure clicks are captured */
}

.chat-container .flag-button {
  background: none;
  border: none;
  padding: 4px 8px;
  cursor: pointer;
  color: #666;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  pointer-events: auto; /* Ensure clicks are captured */
}

.chat-container .flag-button:hover {
  color: #000;
  background: #f5f5f5;
  border-radius: 3px;
}

/* Style for the highlight button */
.wizard-container #startHighlighting.active {
  background-color: #ffd700;
  color: #000;
  font-weight: bold;
}


.wizard-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
}

/* Changes panel styles */
.wizard-container .changes-panel {
  border: 1px solid #dee2e6;
  border-radius: 8px;
  background: white;
  margin-top: 1rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  display: none;
}

.wizard-container .changes-panel .changes-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid #dee2e6;
  background: #f8f9fa;
  border-radius: 8px 8px 0 0;
  margin-bottom: 1rem;
}

.wizard-container .changes-panel .changes-actions {
  display: flex;
  gap: 0.5rem;
}

.wizard-container .changes-panel .changes-container {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.wizard-container .changes-panel .change-item {
  border: 1px solid #dee2e6;
  border-radius: 4px;
  padding: 1rem;
  background: white;
}


.wizard-container .changes-panel .change-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.wizard-container .changes-panel .change-actions {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

.wizard-container .changes-panel .version-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.wizard-container .changes-panel .version-comparison pre {
  white-space: pre-wrap;
}

.wizard-container .changes-panel .old-version, .wizard-container .changes-panel .new-version {
  padding: 1rem;
  background: #f8f9fa;
  border-radius: 4px;
}

.wizard-container .changes-panel .save-all-changes {
  padding: 0.5rem 1rem;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.wizard-container .changes-panel .close-changes {
  padding: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  color: #666;
  border-radius: 4px;
}

.wizard-container .changes-panel .close-changes:hover {
  background: #f0f0f0;
}

.wizard-container .testing-layout .review-container {
  display: flex;
  flex-direction: column;
}

.wizard-container .testing-layout .comment-header {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.wizard-container .testing-layout .comment-text {
  flex-grow: 1;
  padding: 8px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  resize: vertical;
  min-height: 60px;
}

.wizard-container .testing-layout .examples-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0;
}

.wizard-container .testing-layout .example-text {
  font-style: italic;
  color: #495057;
  margin-bottom: 4px;
}

.wizard-container .testing-layout .example-source {
  font-size: 0.875em;
  color: #6c757d;
}

.wizard-container .testing-layout .delete-comment,
.wizard-container .testing-layout .delete-example {
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: #adb5bd;
  font-size: 20px;
  cursor: pointer;
  border-radius: 50%;
  flex-shrink: 0;
}

.wizard-container .testing-layout .delete-comment:hover,
.wizard-container .testing-layout .delete-example:hover {
  background: #e9ecef;
  color: #495057;
}

.wizard-container .testing-layout .add-comment-btn {
  padding: 8px 16px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  background: white;
  color: var(--main-theme-color-dark);
  cursor: pointer;
  display: flex;
  align-items: center;
  align-self: center;
  gap: 6px;
}

.wizard-container .testing-layout .add-comment-btn:hover {
  background: #f8f9fa;
}

.chat-container .mark {
  background-color: #fff3cd;
  padding: 2px;
  border-radius: 2px;
  transition: background-color 0.2s;
}

.chat-container .mark:hover {
  background-color: #ffe69c;
}

.chat-container .highlight-popup {
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  border-radius: 4px;
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

.chat-container .mark {
  background-color: #fff3cd;
  padding: 2px;
  border-radius: 2px;
  transition: background-color 0.2s;
}

.chat-container .mark:hover {
  background-color: #ffe69c;
}

.chat-container .criteria-score-reasons-list mark {
  background-color: #e3f2fd;
}

.chat-container .criteria-score-reasons-list mark:hover {
  background-color: #bbdefb;
}

.wizard-container .testing-layout .comment-header {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  position: relative;
}

.wizard-container .testing-layout .comment-text {
  flex-grow: 1;
  padding: 8px 12px;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  resize: none;
  min-height: 60px;
  font-size: 14px;
}

.wizard-container .testing-layout .delete-btn {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  color: white;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-self: center;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.wizard-container .testing-layout .example-item .delete-btn {
  position: relative;
  right: 0;
  top: 0;
  background: none;
  color: #6c757d;
  align-self: flex-start;
}

.wizard-container .testing-layout .delete-btn:hover {
  opacity: 1;
}

.wizard-container .testing-layout .examples-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0;
}

.wizard-container .testing-layout .example-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  color: #6c757d;
  font-size: 12px;
}

.wizard-container .testing-layout .example-source {
  display: flex;
  align-items: center;
  gap: 4px;
}

.wizard-container .testing-layout .example-source i {
  font-size: 12px;
}

.wizard-container .testing-layout .example-text {
  font-style: italic;
  color: #495057;
  font-size: 14px;
  line-height: 1.4;
}

.wizard-container .testing-layout .comment-footer {
  margin-top: 12px;
}

.wizard-container .testing-layout .add-example-btn {
  border: 1px solid #dee2e6;
  border-radius: 4px;
  background: white;
  color: #495057;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}

.wizard-container .testing-layout .add-example-btn i {
  font-size: 12px;
}

.wizard-container .testing-layout .add-example-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.wizard-container .testing-layout .review-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: #f8f9fa;
}

.wizard-container .testing-layout .comments-container {
  flex: 1;
  overflow-y: auto;
  padding-top: 16px;
  /* Add padding bottom to account for the fixed button */
  padding-bottom: 80px;
}

.wizard-container .testing-layout .improve-button-container {
  display: flex;
  justify-content: center;
  padding: 16px;
}

.wizard-container .testing-layout .improve-btn {
  width: 90%;
  padding: 12px;
  border-radius: 6px;
  background: #0d6efd;
  color: white;
  border: none;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.wizard-container .testing-layout .improve-btn:disabled {
  background: #e9ecef;
  color: #6c757d;
  cursor: not-allowed;
}

.wizard-container .testing-layout .improve-btn i {
  font-size: 14px;
}

/* Comment and example styles */
.wizard-container .testing-layout .comment-item {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
}

.wizard-container .testing-layout .comment-item .comment-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.wizard-container .testing-layout .examples-list {
  max-height: 300px;
  overflow-y: auto;
  margin: 8px 0;
}

.wizard-container .testing-layout .example-item {
  padding-left: 15px;
  margin: 4px 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wizard-container .testing-layout .custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #dee2e6 transparent;
}

.wizard-container .testing-layout .custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.wizard-container .testing-layout .custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.wizard-container .testing-layout .custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: #dee2e6;
  border-radius: 3px;
}

.wizard-container .testing-layout .review-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.wizard-container .testing-layout .review-chat {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    height: 100%; /* Ensure full height */
    overflow: hidden; /* Prevent double scrollbars */
}

.wizard-container .testing-layout .chat-messages {
  flex: 1;
  padding: 1rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

@keyframes fade-in {
  from { 
      opacity: 0;
      transform: translateY(10px);
  }
  to { 
      opacity: 1;
      transform: translateY(0);
  }
}

.wizard-container .testing-layout .chat-message {
  display: flex;
  gap: 12px;
  margin-bottom: 0; /* Remove margin since we're using gap */
  border-radius: 12px;
  max-width: 100%;
  animation: fade-in 0.3s ease-out;
}

.wizard-container .testing-layout .chat-message.user {
  background: white;
  margin-left: auto;
  flex-direction: row-reverse;
  border: 1px solid #dee2e6;
  max-width: 90%;
}

.wizard-container .testing-layout .chat-message.assistant {
  margin-right: auto;
}

.wizard-container .testing-layout .chat-message.system {
  background: #fff3e0;
  margin: 1rem auto;
  justify-content: center;
}

.wizard-container .testing-layout .chat-message.error {
  background: #ffebee;
  color: #c62828;
  margin: 1rem auto;
  text-align: center;
}

.wizard-container .testing-layout .chat-input {
  flex-shrink: 0; /* Prevent input from shrinking */
  display: flex;
  gap: 0.5rem;
  padding: 1rem;
  border-top: 1px solid #eee;
  background: white; /* Ensure background covers content below */
  position: sticky;
  bottom: 0;
}

.wizard-container .testing-layout .chat-input textarea {
  flex-grow: 1;
  resize: none;
}

.wizard-container .testing-layout .chat-input button {
  padding: 0.5rem 1rem;
  background: var(--main-theme-color-dark);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.wizard-container .testing-layout .example-toolbar {
  flex-shrink: 0;
  padding: 0.5rem;
  border-top: 1px solid #eee;
  background: white;
}

.wizard-container .testing-layout .add-example-btn {
  padding: 0.5rem 1rem;
  background: none;
  border: 1px solid #1976d2;
  color: #1976d2;
  border-radius: 4px;
  cursor: pointer;
}

.wizard-container .testing-layout .add-example-btn.active {
  background: yellow;
  color: var(--dark-text-color2);
}

.wizard-container .testing-layout .source-info {
  font-size: 0.8rem;
  color: #666;
  margin-top: 0.5rem;
}

.wizard-container .testing-layout .suggestions {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wizard-container .testing-layout .suggestion {
  background: white;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  cursor: pointer;
  transition: all 0.2s ease;
}

.wizard-container .testing-layout .suggestion:hover {
  background: #f8f9fa;
  border-color: #1976d2;
}

.wizard-container .testing-layout .message-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.wizard-container .testing-layout .message-content {
  flex: 1;
  white-space: pre-line;
  margin: 0px 10px;
}

.wizard-container .testing-layout .message-content p {
  margin-bottom: 0;
}


.wizard-container .testing-layout .message-content .change .field-title {
  font-weight: bold;
  font-size: 1.1rem;
}

.wizard-container .testing-layout .message-content .change .after-title,
.wizard-container .testing-layout .message-content .change .before-title {
  font-weight: bold;
  font-style: italic;
  color: #666;
}


.wizard-container .testing-layout .message-content .change .before {
  background: #f0e1e1;
  white-space: pre-line;
  padding: 5px;
  border-radius: 5px;
  border: 0.5px red solid;
}

.wizard-container .testing-layout .message-content .change .after {
  background: #e1f0e1;
  white-space: pre-line;
  padding: 5px;
  border-radius: 5px;
  border: 0.5px green solid;
}

/* Loading indicator */
.wizard-container .testing-layout .loading-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}

.wizard-container .testing-layout .typing-dots {
  display: flex;
  gap: 4px;
}

.wizard-container .testing-layout .typing-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--main-theme-color-dark);
  animation: typing 1.4s infinite;
  opacity: 0.2;
}

.wizard-container .testing-layout .typing-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.wizard-container .testing-layout .typing-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typing {
  0%, 100% {
      transform: translateY(0);
      opacity: 0.2;
  }
  50% {
      transform: translateY(-4px);
      opacity: 1;
  }
}

/* Suggestions styling */
.wizard-container .testing-layout .suggestions {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wizard-container .testing-layout .suggestion {
  background: white;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  cursor: pointer;
  transition: all 0.2s ease;
}

.wizard-container .testing-layout .suggestion:hover {
  background: #f8f9fa;
  border-color: #1976d2;
} 

/* Modify chat input area to stack buttons */
.wizard-container .testing-layout .chat-input {
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    border-top: 1px solid #eee;
    background: white;
    position: sticky;
    bottom: 0;
    margin-bottom: 0px;
}

.wizard-container .testing-layout .chat-input .input-row {
    display: flex;
    gap: 0.5rem;
}

/* Style for drafted examples */
.wizard-container .testing-layout .example-toolbar {
    padding: 0.5rem 1rem;
    border-top: 1px solid #eee;
    background: #f8f9fa;
    display: none; /* Hidden by default */
}

.wizard-container .testing-layout .example-toolbar.has-examples {
    display: block; /* Show when has examples */
}

.wizard-container .testing-layout .drafted-examples {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.wizard-container .testing-layout .drafted-example {
    border-left: 3px solid var(--main-theme-color-dark);
    padding-left: 0.75rem;
    color: #666;
    font-style: italic;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wizard-container .testing-layout .drafted-example span {
  font-size: 0.9rem;
}

.wizard-container .testing-layout .drafted-example .remove-example {
    background: none;
    border: none;
    color: #dc3545;
    cursor: pointer;
    padding: 0.25rem;
}

/* Style for examples in messages */
.wizard-container .testing-layout .chat-message .example-quote {
    border-left: 3px solid #1976d2;
    padding-left: 0.75rem;
    margin: 0.5rem 0;
    color: #666;
    font-style: italic;
}

/* Modify chat input area layout */
.wizard-container .testing-layout .chat-input {
    display: flex;
    gap: 0.5rem;
    padding: 1rem;
    border-top: 1px solid #eee;
    background: white;
    position: sticky;
    bottom: 0;
}

/* Create container for input and buttons */
.wizard-container .testing-layout .chat-input-container {
    display: flex;
    gap: 0.5rem;
    width: 100%;
}

/* Style textarea */
.wizard-container .testing-layout .chat-input textarea {
    flex-grow: 1;
    resize: none;
}

/* Style buttons container */
.wizard-container .testing-layout .chat-input .input-row {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Style individual buttons */
.wizard-container .testing-layout .chat-input button {
    padding: 0.5rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Review chat header */
.wizard-container .testing-layout .review-chat-header {
    padding: 1rem;
    border-bottom: 1px solid #eee;
    background: white;
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wizard-container .testing-layout .review-chat-header h3 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--dark-text-color1);
}

/* Adjust messages container to account for header */
.wizard-container .testing-layout .chat-messages {
    flex: 1;
    padding: 0rem 1rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* Add padding to prevent messages being hidden under header */
    /* padding-top: calc(1rem + 8px); */
}

/* Ensure header stays above messages when scrolling */
.wizard-container .testing-layout .review-chat {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    height: 100%;
    overflow: hidden;
    position: relative;
}

/******************** CUSTOM CHAT STYLES ********************/


/***** BUBBLE STYLE *****/

#chatPage.bubbles .chat-body .chatbot-message .message {
  width: fit-content;
  background: var(--chatbot-bubble-color); 
  padding: 10px 20px;
  border-radius: 0px 20px 20px 20px;
  max-width: 60%;
}

#chatPage.bubbles .chat-body .user-message {
  text-align: end;
}

#chatPage.bubbles .chat-body .user-message .message {
  width: fit-content;
  background: var(--user-bubble-color);
  padding: 10px 20px;
  border-radius: 20px 0px 20px 20px;
  margin-left: auto;
  max-width: 60%;
  text-align: left;
}

/***** AUDIO QUESTION STYLE *****/

#chatPage.audio-question .instructions-modal {
  text-align: left;
}

#chatPage.audio-question .chat-header,
#chatPage.audio-question .audio-controls,
#chatPage.audio-question .notes-container {
  flex: 1;
  justify-content: center;
}

#chatPage.audio-question .audio-controls,
#chatPage.audio-question .chat-header {
  text-align: center;
}

#chatPage.audio-question .circle {
  height: 150px;
  width: 150px;
}

#chatPage.audio-question .text-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-right: 20px;
}

#chatPage.audio-question #toggleTranscriptBtn,
#chatPage.audio-question #toggleTxtInputBtn {
  border: none;
  background: none;
  width: fit-content;
  padding: 10px;
  align-self: center;
  position: relative;
}

#chatPage.audio-question #toggleTranscriptBtn .tooltip,
#chatPage.audio-question #toggleTxtInputBtn .tooltip {
  position: absolute;
  right: 90%;
  top: 20%;
  opacity: 1;
}

#chatPage.audio-question #toggleTxtInputBtn span {
  margin-left: 5px;
}

#chatPage.audio-question .chat-body {
  text-align: left;
  flex: initial;
}

#chatPage.audio-question .chat-controls {
  left: 0px;
  margin-right: 0px;
}

#chatPage.audio-question .chat-inputbar {
  margin-left: 0px;
}

#chatPage.audio-question .notes-container {
  background: white;
}

#chatPage.audio-question .feedback-controls {
  margin: 10px 0px;
}

#chatPage.audio-question .generate-feedback {
  margin-top: auto;
  border-radius: 7px;
  background: rgb(226 220 220);
  color: rgb(88, 84, 84);
  text-align: center;
  padding: 5px;
  border: none;
  font-size: 0.9rem;
  width: fit-content;
  align-self: center;
}

#chatPage.audio-question  .generate-feedback.active {
  background: var(--main-theme-color-dark);
  color: white;
  font-weight: bold;
}

#chatPage.audio-question .generate-feedback.active:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#chatPage.audio-question .hover-text {
  display: none;
}

/***** QUESTIONS STYLE *****/

#chatPage.questions .question-container {
  width: 100%;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  margin: 0.2rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

#chatPage.questions .question-container:hover,
#chatPage.questions .question-container:focus-within {
  border-color: #007bff;
  background: #f8f9fa;
  box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25);
}

#chatPage.questions .user-message:hover,
#chatPage.questions .chatbot-message:hover {
  background: none;
}

#chatPage.questions .chatbot-message .message-text {
  font-weight: bold;
}

#chatPage.questions .user-message {
  align-items: flex-start;
}

#chatPage.questions #txtInput {
  padding-bottom: 1%;
}

/* #chatPage.questions #txtInput {
  height: 100% !important;
  max-height: 100%;
} */

/* #chatPage.questions .message-container #txtInput {
  height: 100px !important;
} */


#chatPage.questions .generate-feedback {
  margin: 0 0.2rem 0.2rem 0.2rem
}


/***** EMBED SCENARIO SELECTION *****/

#chatPage.scenario-select {
  background: var(--main-theme-color-light);
  display: flex;
  align-items: center;
}

#chatPage.scenario-select .select-container {
  max-width: 900px;
  margin: 40px auto;
  padding: 0 24px;
  text-align: center;
}

#chatPage.scenario-select .select-container h1 {
  margin-bottom: 30px;
  font-size: 2rem;
  font-weight: 600;
  color: var(--dark-text-color1);
}

#chatPage.scenario-select .instructions {
  margin: 0 auto 24px;
  max-width: 650px;
  font-size: 0.95rem;
  line-height: 1.5;
}

#chatPage.scenario-select .scenario-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}

/* ===== Card styling ===== */
/* #chatPage.scenario-select .card {
  background: #fff;
  border-radius: 8px;
  border: 1px solid #e0e6ed;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#chatPage.scenario-select .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
} */

#chatPage.scenario-select .card a {
  display: block;
  padding: 24px 18px;
  height: 100%;
  width: 100%;
  color: var(--main-theme-color-dark);
  text-decoration: none;
  font-size: 1.05rem;
  font-weight: bold;
}

/* ===== Accessible focus indicator ===== */
#chatPage.scenario-select .card a:focus-visible {
  outline: 3px solid #0b5fff;
  outline-offset: 2px;
  border-radius: 6px;
}

/* ===== Responsive tweaks ===== */
@media (max-width: 480px) {
  #chatPage.scenario-select .select-container h1 { font-size: 1.65rem; }
  #chatPage.scenario-select .card a { padding: 20px 16px; }
}


/***** REALTIME AUDIO MODE *****/

#chatPage .audio-body {
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

#realtimeRecordIcon {
  margin: 0px 5px;
  background: none;
  border: none;
}

#stopRealtimeAudioBtn {
  border: none;
  background: none;
  color: var(--sidepanel-background-color);
}

#realtimeMicCircle.fa-stack {
  color: grey;
  background-color: grey;
  margin-left: 0px
}

#realtimeMicCircle.fa-stack .fa-bars-staggered {
  color: #f5f5f5;
  pointer-events: none; /* This makes the bars "transparent" to hover events */
}

.audio-spectrum-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 200px;
  padding: 10px;
}

.audio-spectrum-indicator .wave {
  width: 10px;
  height: 50%;
  background-color: lightgrey;
  border-radius: 2px;
}

.audio-spectrum-indicator.active .wave {
  background-color: var(--main-theme-color-dark);
  animation: wave-animation 1s ease-in-out infinite;
  height: 100%;
}

.audio-spectrum-indicator.active .wave:nth-child(2) { animation-delay: 0.1s; }
.audio-spectrum-indicator.active .wave:nth-child(3) { animation-delay: 0.2s; }
.audio-spectrum-indicator.active .wave:nth-child(4) { animation-delay: 0.3s; }
.audio-spectrum-indicator.active .wave:nth-child(5) { animation-delay: 0.4s; }
.audio-spectrum-indicator.active .wave:nth-child(6) { animation-delay: 0.5s; }
.audio-spectrum-indicator.active .wave:nth-child(7) { animation-delay: 0.6s; }
.audio-spectrum-indicator.active .wave:nth-child(8) { animation-delay: 0.7s; }
.audio-spectrum-indicator.active .wave:nth-child(9) { animation-delay: 0.8s; }
.audio-spectrum-indicator.active .wave:nth-child(10) { animation-delay: 0.9s; }

@keyframes wave-animation {
  0%, 100% { transform: scaleY(0.3); }
  50% { transform: scaleY(1); }
}


/******************** CUSTOM FEEDBACK STYLES ********************/


/***** CHECKLIST FEEDBACK STYLE *****/

.criteria-element.checklist .checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
  margin-top: 1rem;
}

.criteria-element.checklist .checklist-check {
  color: var(--success-color, #28a745);
  flex-shrink: 0;
  margin-top: 0.2rem;
}

.criteria-element.checklist .checklist-cross {
  color: var(--error-color, #dc3545);
  flex-shrink: 0;
  margin-top: 0.2rem;
}

.criteria-element.checklist .checklist-content {
  flex: 1;
  text-align: left;
}

.criteria-element.checklist .checklist-key {
  font-weight: bold;
  display: block;
  margin-bottom: 0.5rem;
}

.criteria-element.checklist .checklist-reason {
  margin: 0;
  color: var(--text-secondary, #666);
  /* display: none; */
}


/***** PARAGRAPH FEEDBACK STYLE *****/

.criteria-element.paragraph .criteria-paragraph {
  padding: 1rem 0;
}


/***** LEARNING DESIGN WIZARD *****/

.wizard-container .criteria-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 0;
    width: 100%;
}

.wizard-container .criteria-card {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 20px;
    transition: all 0.3s ease;
    display: flex;
    gap: 15px;
    width: 100%;
}

.wizard-container .criteria-card:hover {
    border-color: var(--main-theme-color-dark);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.wizard-container .criteria-card .criteria-header {
    display: flex;
    align-items: center;
}

.wizard-container .criteria-card .title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wizard-container .criteria-card .title h3 {
    font-size: 1.1rem;
    margin: 0;
    color: #212529;
}

.wizard-container .criteria-card .title .attribute {
    background: var(--main-theme-color-dark);
    color: white;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 5px;
}

.wizard-container .criteria-card .criteria-actions {
    display: flex;
    gap: 8px;
}

.wizard-container .criteria-card .criteria-actions button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
}

.wizard-container .criteria-card .criteria-actions .tooltip {
    position: absolute;
    right: 120%;
    opacity: 1;
    white-space: nowrap;
}

.wizard-container .criteria-card .criteria-body {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding-top: 0rem;
}

.wizard-container .criteria-card .criteria-section {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.wizard-container .criteria-card .criteria-section h4 {
    font-size: 0.9rem;
    margin: 0;
    color: #6c757d;
}

.wizard-container .criteria-card .criteria-section p {
    margin: 0;
    color: #212529;
    white-space: pre-wrap;
}

.wizard-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 1rem;
    padding: 1rem;
    height: calc(100vh - 200px);
    min-height: 600px;
    overflow: hidden;
}

.wizard-layout .review-panel {
    height: 100%;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    background: white;
    display: flex;
    flex-direction: column;
    flex: 1.5;
}

.wizard-layout .wizard-main-content {
    height: 100%;
    overflow-y: auto;
    padding-right: 1rem;
    flex: 2;
}

.wizard-layout .review-chat {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.wizard-layout .review-chat-header {
    padding: 1rem;
    border-bottom: 1px solid #dee2e6;
    background: #f8f9fa;
    border-radius: 8px 8px 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.wizard-layout .review-chat-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wizard-container .form-section h3,
.wizard-layout .review-chat-header h3 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--dark-text-color1);
}

.wizard-layout .chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.wizard-layout .chat-input {
    padding: 0.5rem;
    border-top: 1px solid #dee2e6;
    background: white;
}

.wizard-layout .chat-input-container {
    display: flex;
    width: 100%;
    gap: 0.5rem;
}

.wizard-layout .chat-input textarea {
    resize: none;
    border-radius: 8px;
}

.wizard-layout .chat-input .input-row {
    display: flex;
    justify-content: flex-end;
}

.wizard-layout .chat-input button {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 4px;
    background: var(--primary-color);
    color: white;
    cursor: pointer;
}

.wizard-layout .chat-input button:hover {
    background: var(--primary-color-dark);
}

.wizard-layout .example-toolbar {
    padding: 0.5rem 1rem;
    border-top: 1px solid #dee2e6;
    background: #f8f9fa;
}

/* Adjust testing layout for step 7 */
.wizard-layout .testing-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    height: 100%;
}

/* Message styles */
.wizard-layout .chat-message {
    display: flex;
    gap: 12px;
    padding: 0.75rem;
    border-radius: 8px;
    max-width: 90%;
}

.wizard-layout .chat-message.user {
    background: #f8f9fa;
    margin-left: auto;
    flex-direction: row-reverse;
}

.wizard-layout .chat-message.assistant {
    /* background: #e3f2fd; */
    background: var(--learning-design-assistant-message-color);
    margin-right: auto;
}

.wizard-layout .chat-message.system {
    background: #fff3e0;
    margin: 0.5rem auto;
    justify-content: center;
    font-style: italic;
}



/* Chat message styling */
.wizard-container .chat-message {
  display: flex;
  margin-bottom: 16px;
  max-width: 100%;
}

.wizard-container .chat-message .chat-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  background: #f5f5f5;
  flex-shrink: 0;
}

.wizard-container .chat-message .chat-text {
  background: none;
  padding: 12px 16px;
  border-radius: 18px;
  color: #333;
  white-space: pre-line;
}

.wizard-container .chat-message.user .chat-text {
  background: none;
}

.wizard-container .chat-message.assistant .chat-text {
  background: none;
}

.wizard-container .chat-message.system .chat-text {
  background: none;
  font-style: italic;
}

/* Changes message styling */
.wizard-container .chat-message.changes {
  flex-direction: column;
}

.wizard-container .chat-message.changes .chat-text {
  width: 100%;
  max-width: 100%;
}

.wizard-container .changes-header {
  margin-bottom: 12px;
}

.wizard-container .changes-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.wizard-container .change-item {
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 12px;
  transition: all 0.2s ease;
}

.wizard-container .change-item.accepted {
  background-color: #e5fff0;
  border-color: #a8e6bc;
}

.wizard-container .change-item.rejected {
  background-color: #fff0f0;
  border-color: #f5c6cb;
}

.wizard-container .change-field {
  margin-bottom: 8px;
  border-bottom: 1px solid #eee;
  padding-bottom: 8px;
}

.wizard-container .change-details {
  margin-bottom: 12px;
}

.wizard-container .change-values {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}

.wizard-container .change-values .current-value {
  color: #666;
  font-size: 0.9em;
  white-space: pre-line;
}

.wizard-container .change-values .suggested-value {
  /* font-weight: bold; */
  white-space: pre-line;
}

.wizard-container .change-values .current-value .label,
.wizard-container .change-values .suggested-value .label,
.wizard-container .change-explanation .label {
  font-weight: bold;
}

.wizard-container .change-explanation {
    display: flex;
    flex-direction: column;
}

.wizard-container .change-reason {
  font-size: 0.9em;
  font-style: italic;
  color: #666;
  margin-top: 8px;
}

.wizard-container .change-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 3px;
}

.wizard-container .accept-change-btn, .wizard-container .reject-change-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9em;
}

.wizard-container .addition-actions .accept-addition-btn,
.wizard-container .accept-change-btn {
  background: rgb(16, 168, 125);
  color: white;
  border: none;
}

.wizard-container .addition-actions .reject-addition-btn,
.wizard-container .reject-change-btn {
  background: red;
  color: white;
  border: none;
}

.wizard-container .change-status {
  font-size: 0.9em;
  font-weight: bold;
}

.wizard-container .changes-actions {
  display: flex;
  justify-content: flex-end;
}

.wizard-container .apply-all-btn {
  padding: 8px 16px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 0.5rem;
}

.wizard-container .apply-all-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

/* Highlight animation for changed fields */
@keyframes highlight-pulse {
  0% { box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(25, 135, 84, 0); }
  100% { box-shadow: 0 0 0 0 rgba(25, 135, 84, 0); }
}

.wizard-container .highlight-field {
  animation: highlight-pulse 2s ease-out;
  border-color: #198754 !important;
}

/* Loading indicator animation */
.wizard-container .typing-indicator {
  display: flex;
  align-items: center;
}

.wizard-container .typing-indicator span {
  height: 8px;
  width: 8px;
  margin: 0 1px;
  background-color: var(--main-theme-color-dark);
  border-radius: 50%;
  display: inline-block;
  animation: bounce 1.5s infinite ease-in-out;
}

.wizard-container .typing-indicator span:nth-child(1) {
  animation-delay: -0.3s;
}

.wizard-container .typing-indicator span:nth-child(2) {
  animation-delay: -0.15s;
}

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

.wizard-container .change-item.processing {
  background-color: #f8f9fa;
  opacity: 0.8;
}

.wizard-container .change-item.error {
  background-color: #fff8f8;
  border-color: #f5c6cb;
}

.wizard-container .error-status {
  color: #dc3545;
}

.wizard-container .retry-change-btn {
  padding: 4px 10px;
  background: #6c757d;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 8px;
}

/* Character and Criteria Cards */
.wizard-container .character-cards-container,
.wizard-container .criteria-cards-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}

.wizard-container .character-card,
.wizard-container .criteria-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
  background: white;
  align-items: flex-start;
  flex-direction: row;
  justify-content: space-between;
}

.wizard-container .character-card:hover,
.wizard-container .criteria-card:hover {
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}

.wizard-container .character-header,
.wizard-container .criteria-header {
  padding: 1rem;
}

.wizard-container .criteria-header h3 {
  margin-bottom: 0rem;
}

.wizard-container .criteria-header .criteria-type {
  font-size: 0.9rem;
  margin-left: 2rem;
  font-style: italic;
}

.wizard-container .criteria-content {
  display: flex;
  flex-direction: column;
}

.wizard-container .character-image {
  width: 100%;
  height: 100px;
  object-fit: cover;
}

.wizard-container .character-title,
.wizard-container .criteria-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
}

.wizard-container .criteria-subset {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.2rem 0.5rem;
  background: #e9ecef;
  border-radius: 4px;
  font-size: 0.8rem;
  color: #555;
}

.wizard-container .character-body,
.wizard-container .criteria-body {
  padding: 1rem;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.wizard-container .character-description,
.wizard-container .criteria-description,
.wizard-container .criteria-evaluation,
.wizard-container .creator-tip,
.wizard-container .creator-guidance {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #333;
  white-space: pre-line;
}

.wizard-container .character-actions,
.wizard-container .criteria-actions {
  display: flex;
  padding: 0.5rem 1rem;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* Highlighting */
.wizard-container .highlight-field {
  animation: highlight-pulse 2s ease;
}

@keyframes highlight-pulse {
  0% { background-color: transparent; }
  25% { background-color: rgba(255, 255, 0, 0.3); }
  75% { background-color: rgba(255, 255, 0, 0.3); }
  100% { background-color: transparent; }
}

/* Edit mode */
.wizard-container .character-card.editing .edit-field,
.wizard-container .criteria-card.editing .edit-field {
  width: 100%;
  margin-bottom: 0.5rem;
}

.wizard-container .default-indicator {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.2rem 0.5rem;
  background: #dff0d8;
  border-radius: 4px;
  font-size: 0.8rem;
  color: #3c763d;
}

.wizard-container .character-card.default-character {
  border-color: #5cb85c;
  box-shadow: 0 0 0 2px rgba(92, 184, 92, 0.2);
}

/* AI Improvement */
.wizard-container .improving-indicator {
  display: flex;
  align-items: center;
  padding: 0.5rem;
  color: #0c5460;
  background-color: #d1ecf1;
  border-radius: 4px;
}

.wizard-container .improvement-actions {
  margin-top: 1rem;
  text-align: right;
}

.wizard-container .apply-improvement-btn {
  padding: 0.375rem 0.75rem;
  color: #fff;
  background-color: #28a745;
  border-color: #28a745;
  border-radius: 0.25rem;
  font-weight: 400;
  text-align: center;
  cursor: pointer;
  border: 1px solid transparent;
}

.wizard-container .apply-improvement-btn:hover {
  background-color: #218838;
  border-color: #1e7e34;
}

.wizard-container .apply-improvement-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}


/* Entity type indicators */
.wizard-container .change-item .entity-type {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: normal;
}

.wizard-container .change-item[data-entity-type="feedback_criteria"] .entity-type {
  background-color: #e6f7ff;
  color: #1890ff;
}

.wizard-container .change-item[data-entity-type="bot_character"] .entity-type {
  background-color: #f6ffed;
  color: #52c41a;
}

.wizard-container button:not(.chat-container button) {
  height: auto;
}

.wizard-container .additions-message, .wizard-container .deletions-message {
  margin-bottom: 15px;
  padding: 10px;
  border-radius: 8px;
  background-color: #f8f9fa;
}

/* Headers */
.wizard-container .additions-header h4, .wizard-container .deletions-header h4 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 600;
}

/* Lists */
.wizard-container .additions-list, .wizard-container .deletions-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Elements */
.wizard-container .addition-element, .wizard-container .deletion-element {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-radius: 6px;
  background-color: white;
  border: 1px solid #e0e0e0;
  flex-direction: column;
}

/* Content */
.wizard-container .addition-content, .wizard-container .deletion-content {
  flex: 1;
}

/* Types */
.wizard-container .addition-type, .wizard-container .deletion-type {
  font-size: 12px;
  color: #666;
  margin-bottom: 5px;
}

/* Titles */
.wizard-container .addition-title, .wizard-container .deletion-title {
  font-weight: 600;
  margin-bottom: 5px;
}

/* Details */
.wizard-container .addition-details, .wizard-container .deletion-details {
  font-size: 14px;
  color: #333;
  white-space: pre-line;
}

.wizard-container .addition-details div, .wizard-container .deletion-details div {
  margin-bottom: 3px;
}

/* Actions */
.wizard-container .addition-actions, .wizard-container .deletion-actions {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 5px;
  min-width: 80px;
}

/* Buttons */
.wizard-container .accept-addition-btn, .wizard-container .reject-addition-btn,
.wizard-container .accept-deletion-btn, .wizard-container .reject-deletion-btn {
  padding: 5px 10px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 14px;
}

.wizard-container .accept-addition-btn, .wizard-container .accept-deletion-btn {
  background-color: #28a745;
  color: white;
}

.wizard-container .reject-addition-btn, .wizard-container .reject-deletion-btn {
  background-color: #dc3545;
  color: white;
}

/* Status */
.wizard-container .addition-status, .wizard-container .deletion-status {
  font-size: 14px;
  padding: 5px;
  text-align: center;
}

.wizard-container .error-status {
  color: #dc3545;
}

/* States */
.wizard-container .addition-element.processing, .wizard-container .deletion-element.processing {
  background-color: #f8f9fa;
}

.wizard-container .addition-element.accepted, .wizard-container .deletion-element.accepted {
  background-color: #e9f3eb;
  border-color: #c3e6cb;
}

.wizard-container .addition-element.rejected, .wizard-container .deletion-element.rejected {
  background-color: #f8d7da;
  border-color: #f5c6cb;
  opacity: 0.7;
}

.wizard-container .addition-element.error, .wizard-container .deletion-element.error {
  background-color: #f8d7da;
  border-color: #f5c6cb;
}

.wizard-container .changes-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.wizard-container .change-element {
  background: #f7f7f7;
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wizard-container .changes-message .apply-all-btn,
.wizard-container .change-actions .accept-change-btn {
  background: rgb(16, 168, 125);
  color: white;
  border: none;
}

.wizard-container .change-actions .reject-change-btn {
  background: red;
  color: white;
  border: none;
}

/* Preview placeholder styles */
.wizard-container .preview-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.wizard-container .preview-message {
    text-align: center;
    padding: 2rem;
    max-width: 400px;
}

.wizard-container .preview-message i {
    font-size: 3rem;
    color: var(--main-theme-color-dark);
    margin-bottom: 1rem;
}

.wizard-container .preview-message h3 {
    margin-bottom: 1rem;
    color: var(--dark-text-color1);
}

.wizard-container .preview-message p {
    margin-bottom: 1.5rem;
    color: var(--dark-text-color2);
}

.wizard-container .preview-message button {
    padding: 0.5rem 1.5rem;
}

/* Toggle Switch Styles */
.wizard-container .assistant-toolbar {
  display: flex;
}

.wizard-container .assistant-toolbar .content-items-select {
  width: 100%;
}

.wizard-container .auto-apply-toggle {
  margin-left: 10px;
}

.wizard-container .toggle-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.wizard-container .toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.wizard-container .toggle-slider {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  background-color: #ccc;
  border-radius: 20px;
  transition: .4s;
  margin-right: 8px;
}

.wizard-container .toggle-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  border-radius: 50%;
  transition: .4s;
}

.wizard-container .toggle-switch input:checked + .toggle-slider {
  background-color: var(--main-theme-color-dark);
}

.wizard-container .toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(16px);
}

.wizard-container .toggle-label {
  font-size: 14px;
  color: var(--dark-text-color1);
}

.wizard-container textarea {
  min-height: 24px;          /* Minimum height of one line */
  height: auto;              /* Allow height to be determined by content */
  resize: none;              /* Prevent manual resizing since we're handling it with JS */
  overflow-y: hidden;        /* Hide vertical scrollbar when not needed */
  box-sizing: border-box;    /* Include padding and border in the element's total height */
  transition: height 0.1s;   /* Smooth height transition */
  line-height: 1.5;          /* Consistent line height */
  padding: 8px;              /* Comfortable padding */
}

/* For textareas that need scrolling when they reach a max height */
.wizard-container textarea.scrollable {
  max-height: 200px;         /* Maximum height before scrolling */
  overflow-y: auto;          /* Show scrollbar when content exceeds max-height */
}

/***** DESIGN PAGE STYLE *****/

.role-play-template .rp-ai-avatar {
  fill: var(--main-theme-color-dark);
}
.role-play-template .rp-ai-bubble {
  fill: var(--learning-design-assistant-message-color);
}
.role-play-template .rp-user-avatar {
  fill: var(--main-theme-color-dark);
}
.role-play-template .rp-user-bubble {
  fill: var(--learning-design-assistant-message-color);
}
.audio-practice-template .ap-mic-outer-circle {
  fill: var(--learning-design-assistant-message-color);
}
.audio-practice-template .ap-mic-circle {
  fill: var(--learning-design-assistant-message-color);
}
.audio-practice-template .ap-mic-icon {
  fill: var(--main-theme-color-dark);
}
.prescripted-questions-template .pq-question-marker {
  fill: var(--main-theme-color-dark);
}
.prescripted-questions-template .pq-question-bubble {
  fill: var(--learning-design-assistant-message-color);
}

.design-container .design-header h2 {
  padding-left: 10px;
}

.design-body {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}

.design-body .card {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  width: 340px;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.design-body .card-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #fff;
  margin: 0;
  padding: 1rem 1.5rem;
  background-color: #293138;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.design-body .card-content {
  display: flex;
  justify-content: center;
  padding: 1.5rem;
}

.design-body .template-container {
  background-color: #f7f9fc;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 200px;
  justify-content: center;
}

.design-body .template-container:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.design-body .card-description {
  font-size: 0.95rem;
  color: #666;
  margin: 0;
  padding: 0 1.5rem 1rem;
  text-align: center;
  height: 90px;
}

.design-body .useful-for {
  padding: 1rem 1.5rem;
  border-top: 1px solid #eaeef2;
}

.design-body .useful-for h3 {
  font-size: 0.95rem;
  color: #333;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.design-body .useful-for ul {
  margin: 0;
  padding-left: 0.5rem;
  list-style: none;
}

.design-body .useful-for li {
  font-size: 0.85rem;
  color: #555;
  margin-bottom: 0.75rem;
  padding-left: 0.5rem;
}

.design-body .useful-for li strong {
  font-weight: 600;
  color: #333;
}

/* Audio practice specific styles */
.design-body .audio-practice-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  justify-content: center;
}

.design-body .audio-command {
  font-weight: 600;
  font-size: 14px;
  color: #333333;
  margin-bottom: 30px;
}

.design-body .mic-circle-outer {
  width: 84px;
  height: 84px;
  background-color: var(--learning-design-assistant-message-color);
  border: 1px solid var(--learning-design-assistant-message-color);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.design-body .mic-circle-inner {
  width: 70px;
  height: 70px;
  background-color: var(--card-color0);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.design-body .mic-circle-inner i {
  font-size: 32px;
  color: var(--main-theme-color-dark);
}

/* Modal Styles */
#homePage.design .modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

#homePage.design .modal-content {
  position: relative;
  background-color: #fff;
  margin: 10% auto;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  width: 90%;
  max-width: 600px;
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from { transform: translateY(-50px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

#homePage.design .close-modal {
  position: absolute;
  top: 15px;
  right: 20px;
  color: #aaa;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  transition: color 0.2s;
}

#homePage.design .close-modal:hover {
  color: #333;
}

#homePage.design #modalTitle {
  margin-top: 0;
  margin-bottom: 20px;
  color: #333;
  font-size: 24px;
}

/* Form Styles */
#homePage.design .form-group {
  margin-bottom: 20px;
}

#homePage.design .form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #333;
}

#homePage.design .form-group input[type="text"]:not(.chip-select-input),
#homePage.design .form-group textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  transition: border-color 0.2s;
}

#homePage.design .form-group input[type="text"]:not(.chip-select-input):focus-within,
#homePage.design .form-group textarea:focus-within {
  border-color: var(--chip-primary);
  outline: none;
  /* box-shadow: 0 0 0 2px rgba(74, 108, 250, 0.15); */
  box-shadow: 0 0 0 2px rgba(255, 85, 0, 0.1);
}

#homePage.design .form-actions {
  margin-top: 30px;
  text-align: right;
}

#homePage.design .modal #goToDesignerBtn {
  background-color: var(--main-theme-color-dark);
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s;
}

#homePage.design .modal #goToDesignerBtn i {
  margin-right: 5px;
}

#homePage.design .modal #goToDesignerBtn:hover {
  background-color: var(--main-theme-color-dark);
}

/* Card action styles */
#homePage.design .card-action {
  margin-top: auto;
  text-align: right;
  padding: 0 15px 15px;
}


/******************** CUSTOM FEEDBACK STYLES ********************/

.criteria-element .criteria-body {
  margin-bottom: 1rem;
}


/***** CHECKLIST FEEDBACK STYLE *****/


#homePage.design .select-template {
  display: inline-block;
  color: var(--main-theme-color-dark);
  font-weight: 600;
  font-size: 14px;
  transition: transform 0.2s;
}

#homePage.design .select-template i {
  margin-left: 5px;
  transition: transform 0.2s;
}

#homePage.design .card:hover .select-template {
  color: var(--main-theme-color-dark);
}

#homePage.design .card:hover .select-template i {
  transform: translateX(5px);
}

#homePage.design .content-items-select {
  width: 100%;
}

#homePage.design .error-message {
  color: #dc3545;
  font-size: 0.875rem;
  margin-top: 0.25rem;
  display: block;
}

#homePage.design .form-group {
  margin-bottom: 1rem;
}

#homePage.design .form-control.is-invalid {
  border-color: #dc3545;
}

/* Add a subtle shake animation for form validation errors */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  75% { transform: translateX(10px); }
}

#homePage.design .form-group.has-error {
  animation: shake 0.5s;
}

#homePage.design .flash-messages {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1100;
  max-width: 400px;
}

.form-body .conv-starters {
  display: flex;
  gap: 10px;
  width: 100%;
}

.form-body .conv-starters .form-group {
  flex: 1;
}

/***** PERCENTAGE FEEDBACK STYLE *****/

.criteria-element.score-bar .score-bar-container {
  width: 100%;
  max-width: 200px;
  margin-left: 20px;
  margin-right: 20px;
  display: flex;
  align-items: center;
}

/* Bar background with gradient */
.criteria-element.score-bar .score-bar-background {
  height: 8px;
  width: 100%;
  background: linear-gradient(to right, 
    #ef4444 0%,    /* red-500 */
    #f97316 20%,   /* orange-500 */
    #eab308 40%,   /* yellow-500 */
    #84cc16 60%,   /* lime-500 */
    #22c55e 80%,   /* green-500 */
    #15803d 100%   /* green-700 */
  );
  border-radius: 9999px;
  overflow: hidden;
  position: relative;
}

/* Overlay that covers the gradient */
.criteria-element.score-bar .score-bar-overlay {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  background-color: white; /* rgba(255, 255, 255, 0.8); */
  backdrop-filter: blur(1px);
  transition: width 0.5s ease-out;
  border-radius: 9999px;
}

/* Progress indicator marker */
.criteria-element.score-bar .score-marker {
  position: absolute;
  top: -4px;
  width: 4px;
  height: 16px;
  background-color: white;
  border: 1px solid #374151; /* gray-700 */
  border-radius: 2px;
  transform: translateX(-50%);
  transition: left 0.5s ease-out;
  z-index: 2;
}

/* Percentage text */
.criteria-element.score-bar .score-percentage {
  margin-left: 8px;
  font-size: 14px;
  color: #4b5563; /* gray-600 */
  text-align: right;
}

/* For the categorical format - display category name */
.criteria-element.score-bar .score-category {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 500;
  text-align: right;
}

/* Category colors based on the gradient */
.criteria-element.score-bar .category-advanced {
  color: #15803d; /* green-700 */
}

.criteria-element.score-bar .category-proficient {
  color: #22c55e; /* green-500 */
}

.criteria-element.score-bar .category-developing {
  color: #eab308; /* yellow-500 */
}

.criteria-element.score-bar .category-beginning {
  color: #ef4444; /* red-500 */
}

.criteria-element.score-bar p {
  font-size: 0.9rem;
}

.criteria-element.score-bar .scoring-items-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}

.criteria-element.score-bar .scoring-item {
  display: flex;
  align-items: flex-start;
  font-size: 0.9rem;
  padding-left: 0;
  margin-left: 0;
}

.criteria-element.score-bar .scoring-item i {
  margin-top: 0.1rem;
  font-size: 1rem;
}

.criteria-element.score-bar .scoring-earned {
  color: rgb(16, 168, 125);
}

.criteria-element.score-bar .scoring-not-earned {
  color: grey;
}

.criteria-element.score-bar .scoring-item-content {
  flex: 1;
}

.criteria-element.score-bar .scoring-item-explanation::marker {
  content: initial;
  color: grey;
}

.criteria-element.score-bar .scoring-feedback-list {
  list-style: circle;
  margin-left: 20px;
}

.criteria-element.score-bar .scoring-item-content .feedback-item-title {
  font-weight: bold;
  margin-left: 10px;
}

@media (max-width: 400px) {
  .criteria-element.score-bar .score-bar-container {
    width: 40%;
  }

}


#homePage.design .alert {
  padding: 15px;
  margin-bottom: 10px;
  border: 1px solid transparent;
  border-radius: 4px;
  animation: slideIn 0.3s ease-out;
}

#homePage.design .alert-error {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}

@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.learner-input-modal .modal-content {
    padding: 0;
}

.learner-input-modal .header {
    background: #f8f9fa;
    padding: 20px 24px;
    border-bottom: 1px solid #e9ecef;
    border-radius: 12px 12px 0 0;
}

.learner-input-modal .modal-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
}

.learner-input-modal .modal-body {
    padding: 24px;
}

.learner-input-modal .modal-intro {
    color: #495057;
    margin-bottom: 1.5rem;
    font-size: 1rem;
    line-height: 1.5;
}

.learner-input-modal .form-group {
    margin-bottom: 1.5rem;
}

.learner-input-modal .form-group.has-error .form-control,
.learner-input-modal .form-group.has-error .form-select {
    border-color: #dc3545;
}

.learner-input-modal .form-group-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.learner-input-modal .form-label {
    font-weight: 600;
    margin-bottom: 0;
    color: #333;
    flex: 1;
}

.learner-input-modal .form-group-info {
    cursor: pointer;
    color: #6c757d;
    transition: color 0.15s ease-in-out;
}

.learner-input-modal .form-group-info:hover {
    color: var(--main-theme-color-dark);
}

.learner-input-modal .form-control,
.learner-input-modal .form-select {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 1rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.learner-input-modal .form-control:focus,
.learner-input-modal .form-select:focus {
    border-color: var(--primary-500);
    outline: 0;
    box-shadow: 0 0 0 0.2rem var(--primary-100);
}

.learner-input-modal .form-text {
    background-color: var(--main-theme-color-light);
    border-left: 4px solid var(--main-theme-color-dark);
    border-radius: 4px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #495057;
    display: block;
}

.learner-input-modal .form-text.hide {
    display: none;
}

.learner-input-modal .field-errors {
    margin-top: 0.25rem;
}

.learner-input-modal .error-message {
    color: #dc3545;
    font-size: 0.875rem;
    display: block;
}

.learner-input-modal .modal-actions {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid #e9ecef;
    text-align: right;
}

.learner-input-modal .btn {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.15s ease-in-out;
}

.learner-input-modal .btn-primary {
    background-color: var(--main-theme-color-dark);
    color: white;
}

.learner-input-modal .btn-primary:hover {
    background-color: var(--main-theme-color-dark);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.remove-component-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.remove-learner-component {
    background: none;
    border: none;
    color: red;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 50%;
    transition: all 0.15s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.remove-component:hover,
.remove-learner-component:hover {
    background-color: rgba(220, 53, 69, 0.1);
    color: #c82333;
    transform: scale(1.1);
}

.remove-component i,
.remove-learner-component i {
    font-size: 1.2rem;
}

.center-text {
    text-align: center;
}

#addComponentBtn:hover,
#addLearnerComponentBtn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

/* Learner Components Section Styling */



.home-container .form-body .form-text p {
  margin: 0;
}

/* Error styling */
#learner_components.has-error .learner-component {
    border-color: #dc3545;
}

#learner_components .errors {
    margin-top: 0.5rem;
    padding: 0;
    list-style: none;
}

#learner_components .errors li {
    color: #dc3545;
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
    padding: 0.25rem 0.5rem;
    background-color: rgba(220, 53, 69, 0.1);
    border-radius: 4px;
}

@media (max-width: 768px) {
    .learner-input-modal {
        width: 95%;
    }
}

@media (max-width: 576px) {    
    .remove-component-container {
        justify-content: flex-start;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fixed Submit Button */
.fixed-submit-button {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: var(--primary-500);
  color: white;
  border: none;
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg) var(--spacing-xl);
  font-size: var(--font-size-base);
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  transition: all var(--transition-fast);
  min-width: 160px;
  text-align: center;
  font-family: inherit;
}

.fixed-submit-button:hover {
  background: var(--primary-600);
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl);
}

.fixed-submit-button:active {
  transform: translateY(0);
}

.fixed-submit-button:focus {
  outline: 2px solid var(--primary-300);
  outline-offset: 2px;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .fixed-submit-button {
    bottom: 20px;
    right: 20px;
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-sm);
    min-width: 140px;
  }
}