/******************************************************
  1) Import or ensure you have Lexend Exa
******************************************************/
@import url('https://fonts.googleapis.com/css2?family=Lexend+Exa:wght@300;400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap'); /* For wave button if used */

/******************************************************
  2) Global Font + Container
******************************************************/
.gtm-agent-container,
.gtm-agent-container * {
  font-family: 'Lexend Exa', sans-serif;
  box-sizing: border-box;
}

.gtm-agent-container {
  margin-top: 0;
}

.gtm-agent-container .main-container {
  max-width: 1100px; /* Kept slightly wider */
  margin: 0 auto;
  padding: 2rem 2rem 4rem 2rem;
  position: relative;
}

/* Dark-mode override for container */
:root[data-theme="dark"] .gtm-agent-container .main-container {
  background-color: var(--container-bg) !important;
  color: var(--text-color) !important;
}

.gtm-agent-container .main-container h3 {
  text-align: center;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.gtm-agent-container .main-container p {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 1.5rem auto;
}

/******************************************************************
  BANNER STYLES
******************************************************************/
.paragraph-bundle__product-page-banner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 20px;
  min-height: 350px;
  font-family: 'Lexend Exa', sans-serif;
  overflow: hidden;
  color: white;
  width: 100%;
  box-sizing: border-box;
}

.product-page-banner__background {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to right, #006666, #00cccc);
  background-size: cover;
}

.product-page-banner__wrapper {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.product-page-banner__svg {
  width: 140px;
  margin: 0 auto 15px;
}

.hr-icon-svg-container {
  position: relative;
}

.hr-icon-svg {
  max-width: 100%;
  opacity: 0;
}

.product-page-banner__heading {
  margin: 0 auto 40px;
  font-size: 40px;
  line-height: 50px;
  color: white;
  font-weight: 100;
  opacity: 0;
}

.product-page-banner__subheading {
  margin: 0 auto 20px;
  padding: 0 10px;
  font-size: 25px;
  line-height: 35px;
  color: white;
  font-weight: 300;
  opacity: 0;
}


/******************************************************
  GTM SELECTION STYLES (Moved from HTML)
******************************************************/
/* --- GTM Selection Box Styling (Adapted from .subsection-box) --- */
.gtm-selection-container {
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 1.5rem; /* Was 20px */
  margin-bottom: 2rem; /* Was 25px */
  background-color: #fdfdfd; /* Slightly off-white */
  max-width: 1100px; /* Match main container max-width */
  margin-left: auto;
  margin-right: auto;
}

/* Dark mode override */
:root[data-theme="dark"] .gtm-selection-container {
  background-color: #001f3f !important; /* Dark blue */
  border: 1px solid #444 !important;
  color: var(--text-color); /* Inherit text color */
}

.gtm-selection-container h3 {
  text-align: center;
  margin-top: 0;
  margin-bottom: 1.5rem; /* More space below heading */
  font-weight: 600; /* Slightly bolder */
  color: #333; /* Default text color */
}
:root[data-theme="dark"] .gtm-selection-container h3 {
   color: var(--text-color); /* Use theme text color */
}

/* --- Form Group Styling --- */
.form-group-gtm {
  margin-bottom: 1rem; /* Consistent spacing */
  /* Center content within the form group if desired, or keep left-aligned */
  /* text-align: center; */
}

/* --- Label Styling (Adapted from .form-label) --- */
.form-group-gtm label {
  display: flex; /* Use flex to align label text and loader */
  align-items: center; /* Vertically center */
  justify-content: flex-start; /* Align label text to the left */
  /* Or use justify-content: center; if you want labels centered */
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #555; /* Slightly softer default color */
  /* Removed display: block */
}
:root[data-theme="dark"] .form-group-gtm label {
  color: var(--text-color); /* Use theme text color */
}

/* --- Select Styling (Adapted from .custom-input) --- */
.form-group-gtm select {
  width: 100%; /* Full width */
  border: 1px solid #ccc;
  padding: 0.75rem 1rem; /* Adjusted padding for better feel */
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 0.95rem; /* Slightly smaller font */
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
  background-color: #fff; /* Explicit light mode background */
  color: #333; /* Explicit light mode text */
}
.form-group-gtm select:focus {
    border-color: #007bff; /* Highlight on focus */
    outline: none; /* Remove default outline */
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); /* Subtle focus glow */
}

/* Dark mode override for select */
:root[data-theme="dark"] .form-group-gtm select {
  background-color: #001f3f !important; /* Dark blue */
  color: #fff !important;
  border: 1px solid #666 !important; /* Lighter border in dark */
}
:root[data-theme="dark"] .form-group-gtm select:focus {
    border-color: #4da6ff; /* Lighter blue focus */
    box-shadow: 0 0 0 2px rgba(77, 166, 255, 0.3);
}

/* Disabled state styling */
.form-group-gtm select:disabled {
  background-color: #e9ecef;
  opacity: 0.7;
  cursor: not-allowed;
}
 :root[data-theme="dark"] .form-group-gtm select:disabled {
   background-color: #3a3a3a !important;
   opacity: 0.6;
 }

/* --- Loader Styling (Adjusted) --- */
.selection-loader {
  display: inline-block;
  visibility: hidden;
  width: 18px; /* Slightly larger */
  height: 18px; /* Slightly larger */
  border: 2px solid #ccc; /* Lighter grey border */
  border-top: 2px solid #008080; /* Teal to match theme */
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-left: 8px; /* Space between label text and loader */
  vertical-align: middle; /* Align with text */
}
 :root[data-theme="dark"] .selection-loader {
     border: 2px solid #555;
     border-top: 2px solid #00cccc; /* Brighter teal */
 }

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* --- End GTM Selection Styles --- */


/******************************************************
  CHAT WINDOW STYLES (MODIFIED)
******************************************************/
#chat-window {
  border: 1px solid #ccc;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 650px; /* Increased height more */
  background-color: #f9f9f9;
  margin: 0 auto;
}

:root[data-theme="dark"] #chat-window {
  border-color: #555;
  background-color: #2a2a2a;
}

#chat-messages {
  flex-grow: 1;
  padding: 15px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Animation for message appearance */
@keyframes messageAppear {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98); /* Adjusted scale slightly */
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.message {
  padding: 10px 15px; /* Slightly more padding */
  border-radius: 18px; /* More rounded */
  max-width: 80%; /* Allow slightly wider bubbles */
  word-wrap: break-word;
  line-height: 1.45; /* Slightly increased line height */
  opacity: 0; /* Start hidden for animation */
  transform: scale(0.98); /* Start slightly scaled down */
}

/* Trigger the animation */
.message.appear {
    animation: messageAppear 0.25s ease-out forwards;
}

/* Styles specific to the content *inside* the bubbles */
.message p {
    margin: 0;
    padding: 0;
    text-align: left;
}
/* Styles for markdown elements rendered inside agent messages */
.agent-message p strong, .agent-message p b {
    font-weight: 600; /* Or bold */
}
.agent-message p em, .agent-message p i {
    font-style: italic;
}
/* Add more specific styles for lists, code blocks etc. if needed */
.agent-message p ul, .agent-message p ol {
    margin-top: 5px;
    margin-bottom: 5px;
    padding-left: 20px;
}
.agent-message p li {
    margin-bottom: 3px;
}
.agent-message p code {
    background-color: rgba(0, 0, 0, 0.05);
    padding: 2px 4px;
    border-radius: 3px;
    font-family: monospace;
    font-size: 0.9em;
}
:root[data-theme="dark"] .agent-message p code {
     background-color: rgba(255, 255, 255, 0.1);
}


.agent-message {
  background-color: #e5e5ea;
  color: #000;
  align-self: flex-start;
  border-bottom-left-radius: 5px; /* Slightly less sharp edge */
}
:root[data-theme="dark"] .agent-message {
  background-color: #3f3f42;
  color: #e0e0e0;
}

.user-message {
  /* Changed to match teal button/banner */
  background-color: #008080; /* Teal Color */
  color: white;
  align-self: flex-end;
  border-bottom-right-radius: 5px; /* Slightly less sharp edge */
}
/* Keep dark mode same for consistency, or choose a darker teal */
:root[data-theme="dark"] .user-message {
  background-color: #008080; /* Teal Color */
}

/* --- Styles for Thinking Indicator --- */
.thinking-message {
    font-style: italic;
    color: #888;
    /* Prevent appear animation on initial add */
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    /* Keep thinking messages left-aligned */
    align-self: flex-start !important;
    background-color: #e5e5ea !important; /* Give it the agent bubble look */
    padding: 10px 15px !important; /* Add padding like other messages */
    border-radius: 18px !important;
    border-bottom-left-radius: 5px !important;
    max-width: 80% !important; /* Match other bubbles */
}
:root[data-theme="dark"] .thinking-message {
   color: #aaa;
   background-color: #3f3f42 !important;
}
.thinking-message p {
    display: flex; /* Use flex to align text and dots */
    align-items: center;
    margin: 0;
    padding: 0;
}
.thinking-dots {
    display: inline-flex; /* Use inline-flex for the container */
    align-items: center; /* Vertically center dots */
    margin-left: 5px; /* Space between "Thinking" and dots */
}
.thinking-dots span {
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: currentColor;
    border-radius: 50%;
    margin-left: 3px; /* Spacing between dots */
    animation: bounce 1.3s infinite ease-in-out;
}
.thinking-dots span:first-child { margin-left: 0; } /* No margin on first dot */
.thinking-dots span:nth-child(1) { animation-delay: -0.3s; }
.thinking-dots span:nth-child(2) { animation-delay: -0.15s; }
.thinking-dots span:nth-child(3) { animation-delay: 0s; }

@keyframes bounce {
  0%, 80%, 100% { transform: scale(0); opacity: 0.5; }
  40% { transform: scale(1.0); opacity: 1; }
}
/* --- End Thinking Indicator Styles --- */

/* --- Error Message Styles --- */
.error-message {
    /* Prevent appear animation on initial add */
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    /* Style like a centered system message but with error color */
    align-self: center !important;
    max-width: 90% !important;
    background-color: transparent !important;
    padding: 5px 0 !important; /* Minimal vertical padding */
    border-radius: 0 !important;
}
.error-message p {
    font-style: italic;
    text-align: center; /* Center the text */
    color: #d9534f !important;
}
 :root[data-theme="dark"] .error-message p {
    color: #f18a87 !important;
 }
/* --- End Error Message Styles --- */

/* --- System Message Styles --- */
.system-message {
     /* Prevent appear animation on initial add if needed, or allow it */
     /* animation: none !important; */
     opacity: 1 !important; /* Ensure visible */
     transform: none !important;
     /* Style like a centered message */
     align-self: center !important;
     max-width: 90% !important;
     background-color: transparent !important;
     padding: 5px 0 !important; /* Minimal vertical padding */
     border-radius: 0 !important;
}
.system-message p {
     font-style: italic;
     text-align: center; /* Center the text */
     color: #007bff !important; /* Specific system color */
}
:root[data-theme="dark"] .system-message p {
    color: #58a6ff !important; /* Lighter blue for dark mode */
}
/* --- End System Message Styles --- */


#chat-input-area {
  display: flex;
  padding: 10px;
  border-top: 1px solid #ccc;
  background-color: #f0f0f0;
}
:root[data-theme="dark"] #chat-input-area {
  border-top-color: #555;
  background-color: #333;
}

#chat-input {
  flex-grow: 1;
  padding: 10px 15px;
  border: 1px solid #ccc;
  border-radius: 20px;
  margin-right: 10px;
  font-size: 0.95rem;
  outline: none;
}
:root[data-theme="dark"] #chat-input {
  background-color: #444;
  border-color: #666;
  color: #fff;
}
:root[data-theme="dark"] #chat-input::placeholder {
  color: #aaa;
}


#send-button {
  /* Styles for wave-button are below */
}


/******************************************************
  WAVE BUTTON STYLES
******************************************************/
.wave-button {
  position: relative;
  display: inline-block;
  border: none;
  outline: none;
  cursor: pointer;
  overflow: hidden;
  text-decoration: none;
  border-radius: 20px;
  padding: 10px 20px;
  transition: background-color 0.3s ease;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: 'Righteous', cursive;
}

/* Add disabled state for wave button */
.wave-button:disabled {
  cursor: not-allowed;
  opacity: 0.65;
  background-color: #808080; /* Generic grey */
}
/* Specific disabled state for teal button */
.btn-teal-wave:disabled {
    background-color: #008080; /* Keep base color */
    opacity: 0.65;
}
.btn-teal-wave:disabled:hover {
    background-color: #008080; /* Prevent hover color change when disabled */
}
/* Hide wave effect when disabled */
.wave-button:disabled .wave {
    display: none;
}


.btn-teal-wave {
  background-color: #008080;
}
.btn-teal-wave:hover {
  background-color: #009999;
}

.wave-button .wave {
  width: 200px;
  height: 200px;
  background-color: #00a2a2;
  box-shadow: inset 0 0 30px rgba(0,0,0,0.2);
  position: absolute;
  left: 0;
  top: -80px;
  z-index: 0;
  transition: 0.4s;
}
.wave-button:hover .wave {
  top: -100px;
}
.wave-button .wave::before,
.wave-button .wave::after {
  width: 200%;
  height: 200%;
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -75%);
  border-radius: 45%;
  animation: waveSpin 6s linear infinite;
}
.wave-button .wave::before {
  background-color: rgba(0, 122, 122, 0.7);
  animation-duration: 6s;
}
.wave-button .wave::after {
  background-color: rgba(0, 122, 122, 0.4);
  animation-duration: 12s;
}
.wave-button span {
  position: relative;
  z-index: 1;
}

@keyframes waveSpin {
  0% {
    transform: translate(-50%, -75%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -75%) rotate(360deg);
  }
}