/* --- Basic Reset & Global Styles --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
/* Styles scoped to the chatbot container will be prefixed or contained.
   Global styles like html, body might need careful handling or removal
   if they conflict with the parent WordPress page.
   For now, we'll include them but be mindful. */

/* Scoped body-like styles for the chatbot container */
.inuvo-chatbot-body-wrapper {
  font-family: 'Poppins', sans-serif;
  background-color: transparent; /* Changed for WordPress integration */
  color: var(--text-color, #333);
  display: flex;
  flex-direction: column;
  height: 100%; /* Fill parent height */
  width: 100vw; /* Fill viewport width */
  overflow-y: auto;
  position: relative; /* For positioning fixed elements within */
  margin: 0;
  padding: 0;
  position: fixed; /* Ensure it covers the whole page */
  top: 0;
  left: 0;
  z-index: 9999; /* High z-index to be on top */
}

.inuvo-chatbot-body-wrapper.chat-active {
  overflow-y: hidden;
}

/* --- Theme Variables (Single Theme - Light by default, adapted for transparency) --- */
/* These will be scoped to .inuvo-chatbot-container-main or a higher-level container if possible */
.inuvo-chatbot-container-main { /* This will be the main div you target */
  --bg-color: transparent; /* Main background is transparent */
  --text-color: #333; /* Default text color */
  --text-color-light: #555; /* Lighter text color */
  --text-color-strong: #111;
  --header-color: #222;
  --container-bg: #ffffff;
  --container-shadow: rgba(0, 0, 0, 0.1);
  --container-shadow-chat: rgba(0, 0, 0, 0.08);
  --input-border-color: #ccc;
  --button-primary-bg: #3E871F;
  --button-primary-hover-bg: #336F19;
  --button-secondary-bg: #555;
  --button-secondary-hover-bg: #333;
  --link-color: #3E871F;
  --message-user-bg: #B1C8EE;
  --message-user-text: #000000;
  --message-bot-bg: #E5E5EA;
  --message-bot-text: #000000;
  --system-message-color: #777;
  --chat-input-bg: #f0f0f0;
  --chat-input-border: #e0e0e0;
  --disabled-bg: #e9ecef;
  --modal-overlay-bg: rgba(0,0,0,0.5);
  /* Dark mode variables removed */
}

/* Dark mode styles removed */

/* --- Prechat Form Styling --- */
/* All selectors below will be assumed to be within .inuvo-chatbot-container-main */
#prechat {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-grow: 1;
   padding: 1em;
   background-color: transparent; /* Changed */
   color: var(--text-color);
   transition: opacity 0.3s ease, transform 0.3s ease;
 }
 .prechat-content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 970px; /* Increased max-width by 40px */
 }
 .prechat-columns {
    display: flex;
    gap: 2em;
    width: 100%;
    margin-top: 1em;
 }
.prechat-content-wrapper .logo {
   max-width: 200px !important; /* Enforce max logo width */
   margin-bottom: 1.5em;
}

/* Media query for narrow viewports */
@media (max-width: 768px) {
  .prechat-columns {
    flex-direction: column;
    gap: 1em; /* Adjust gap for stacking */
  }
  .prechat-text,
  .prechat-form-area {
    flex: none; /* Remove flex-grow */
    width: 100%; /* Ensure full width */
  }
  .prechat-text h2,
  .prechat-text p,
  .prechat-text ul {
    text-align: center; /* Center text on narrow viewports */
  }
  .prechat-text ul {
    padding-left: 0; /* Remove padding for centered list */
    list-style-position: inside; /* Adjust list style */
  }
}
 .prechat-text {
    flex: 1;
    display: flex;
    flex-direction: column;
 }
 .prechat-content-wrapper .dark-mode-logo { /* Keep only light mode logo logic */
    display: none;
 }
 /* Removed dark mode logo switching rules */

.inuvo-chatbot-container-main .prechat-content-wrapper .logo.light-mode-logo {
   display: block; /* Ensure it's visible and behaves as a block */
}
 .prechat-text h2 {
    margin-bottom: 0.5em;
    color: var(--header-color);
    text-align: left;
    font-size: 1.9em;
    width: 100%;
 }
 .prechat-text p {
    text-align: left;
    margin-bottom: 1em;
    color: var(--text-color-light);
    line-height: 1.6;
    font-size: 1.1em; /* Reduced font size */
    width: 100%;
 }
 .prechat-text ul {
    text-align: left;
    margin-bottom: 1em;
    color: var(--text-color-light);
    line-height: 1.6;
    font-size: 1.1em; /* Reduced font size */
    width: 100%;
    padding-left: 20px;
 }
 .prechat-text ul li {
    margin-bottom: 0.5em;
 }
 .prechat-form-area {
    flex: 1.2;
    display: flex;
    flex-direction: column;
 }
 .prechat-form-area .form-container {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 1.5em;
 }
#userinfo {
    background-color: transparent; /* Changed */
    padding: 1em 2em 2em 2em;
    border-radius: 8px;
    /* box-shadow: 0 2px 10px var(--container-shadow); */ /* Optional: remove shadow if it looks odd with transparency */
    width: 100%;
}
#userinfo label.field-label {
    display: block;
    margin-bottom: 0.4em;
    font-weight: 600;
    color: var(--text-color);
    font-size: 0.95em;
}
#userinfo input[type="text"],
#userinfo input[type="email"],
#userinfo input[type="url"],
#userinfo input[type="tel"] {
    width: 100%;
    padding: 0.8em;
    border: 1px solid var(--input-border-color);
    background-color: var(--chat-input-bg);
    color: var(--text-color);
    border-radius: 5px;
    font-family: 'Poppins', sans-serif;
    margin-bottom: calc(1.2em - 2px);
    font-size: 1em;
    box-sizing: border-box;
}
#userinfo input[type="text"]:focus,
#userinfo input[type="email"]:focus,
#userinfo input[type="url"]:focus,
#userinfo input[type="tel"]:focus {
  outline: 2px solid var(--button-primary-bg);
  outline-offset: 1px;
  border-color: var(--button-primary-bg);
  box-shadow: 0 0 0 2px rgba(62, 135, 31, 0.2);
  transform: translateY(-1px);
}

#userinfo input[type="text"],
#userinfo input[type="email"],
#userinfo input[type="url"],
#userinfo input[type="tel"] {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.input-error {
    border-color: #dc3545 !important;
}
.terms-container {
    margin-top: 1.5em;
}
.terms-label {
    display: flex;
    align-items: flex-start;
    gap: 0.7em;
    cursor: pointer;
    color: var(--text-color-light);
    font-size: 0.9em;
    line-height: 1.5;
}
.terms-label input[type="checkbox"] {
    width: auto;
    margin-top: 0.25em;
    flex-shrink: 0;
    accent-color: var(--button-primary-bg);
}
.terms-text a {
    color: var(--link-color);
    text-decoration: underline;
    font-weight: 600;
}
 #start {
  width: 100%;
  background-color: var(--button-primary-bg);
  color: white;
  padding: 1em;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
  position: relative;
  overflow: hidden;
}

#start::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
  transition: width 0.3s ease, height 0.3s ease;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

#start:hover::before {
  width: 300px;
  height: 300px;
}

#start:hover {
  background-color: var(--button-primary-hover-bg);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(62, 135, 31, 0.3);
}

#start:active {
  transform: translateY(0);
}

 /* --- Chat Interface Styling --- */
#chat-container {
  display: none; /* Initially hidden by JS */
  flex-direction: column;
  flex-grow: 1;
  width: 100%;
  overflow: auto;
  background-color: transparent; /* Changed */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

#chat-container.active {
  opacity: 1;
  transform: translateY(0);
}
#chat {
  display: flex;
  flex-direction: column-reverse; /* This is key for messages appearing at the bottom and scrolling up */
  width: 100%;
  max-width: 920px; /* Increased chatbox width */
  margin: 0 auto; /* Centering */
  background: transparent; /* Changed */
  padding: 1.5em 2.5em; /* Increased horizontal padding */
  border-radius: 8px;
  /* box-shadow: 0 0 15px var(--container-shadow-chat); */ /* Optional: remove shadow */
  overflow-y: auto; /* Allows scrolling of messages */
  flex-grow: 1; /* Takes available space */
  height: 100%; /* Explicitly set height to fill chat-container space */
  scroll-behavior: smooth;
  /* margin-bottom: 0; */ /* Ensure it can go to the bottom */
  /* padding-bottom: 1em; */ /* Initial padding at bottom */
}

.inuvo-chatbot-body-wrapper.chat-active #chat {
  padding-bottom: 280px; /* Increased padding to 280px per user request */
}

.message {
  margin: 0.5em 0;
  line-height: 1.4;
  max-width: 75%; /* Reduced max-width for chat bubbles */
  word-wrap: break-word;
  display: flex;
  opacity: 0;
  transform: translateY(10px);
  animation: messageSlideIn 0.4s ease-out forwards;
}

@keyframes messageSlideIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

.message.user {
  justify-content: flex-end;
  margin-left: auto;
  margin-right: 0;
}

.message.bot {
  justify-content: flex-start;
  margin-right: auto;
  margin-left: 0;
}

.message > span {
  padding: 8px 12px 8px; /* top 8px, L/R 12px, bottom 8px */
  display: inline-block;
  max-width: 100%;
  text-align: left;
  border-radius: 18px;
  font-size: calc(1rem + 7px); /* Increased font size */
  line-height: 1.6;
  transform: scale(0.95);
  animation: bubbleScaleIn 0.3s ease-out 0.1s forwards;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@keyframes bubbleScaleIn {
  to {
    transform: scale(1);
  }
}

.message > span:hover {
  transform: scale(1.02);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.message.user > span {
  background-color: var(--message-user-bg);
  color: var(--message-user-text);
  font-weight: 500;
  border-bottom-right-radius: 4px;
}

.message.bot > span {
  background-color: var(--message-bot-bg);
  color: var(--message-bot-text);
  font-weight: 400;
  border-bottom-left-radius: 4px;
}

.message > span p {
  margin-bottom: 1em;
  color: inherit;
}
.message > span p:last-child {
  margin-bottom: 0;
}
.message > span ul {
  list-style-type: disc;
  list-style-position: outside;
  padding-left: 20px;
  margin-bottom: 0.5em;
  color: inherit;
}
.message > span ul li {
  margin-bottom: 0.25em;
  color: inherit;
}

.message.system {
    font-style: italic;
    color: var(--system-message-color);
    text-align: center;
    font-size: 0.9em;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
 }
 .message span strong {
     font-weight: 600;
     color: var(--text-color-strong);
 }

/* --- Theme Toggle Button (Removed) --- */
#theme-toggle {
    display: none; /* Removed theme toggle button */
}

 /* --- Chat Input Area Styling --- */
#chat-input {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 860px; /* Increased max-width by 60px */
  padding: 1em 1em 1.5em; /* Adjusted bottom padding: top, horizontal, bottom */
  margin: 0 auto;
  background-color: var(--chat-input-bg);
  border-top: 1px solid var(--chat-input-border);
  flex-shrink: 0;
  border-radius: 8px; /* Round all corners */
}

.inuvo-chatbot-body-wrapper.chat-active #chat-input { /* Scoped to wrapper */
  position: fixed; 
  bottom: 40px; /* Brought up from the bottom of the page */
  left: 50%;
  transform: translateX(-50%);
  margin-top: 0;
  z-index: 100;
  /* max-width, padding, background-color, border-top, border-radius are fine */
}

#action-buttons-container {
  padding: 0 0 10px 0;
  margin-bottom: 10px;
  display: none; /* JS controls visibility */
  order: -1;
}

#messageForm {
  display: flex;
  gap: 0.7em;
  width: 100%;
}
.input-instructions {
  font-size: 1em; /* Increased font size */
  color: var(--text-color-light);
  text-align: center;
  line-height: 1.5;
  max-width: 90%;
  margin: 0.75em auto 0.5em auto;
  width: auto;
}
#messageForm textarea {
  flex: 1;
  padding: 0.8em 1em;
  font-size: calc(1rem + 7px); /* Increased font size */
  font-family: 'Poppins', sans-serif;
  border-radius: 25px !important;
  border: 1px solid var(--input-border-color) !important;
  background-color: var(--container-bg);
  color: var(--text-color);
  outline: none;
  line-height: 1.4;
  resize: none;
  overflow-y: hidden;
  max-height: 120px;
  transition: height 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

#messageForm textarea:focus {
  border-color: var(--button-primary-bg);
  box-shadow: 0 0 0 2px rgba(62, 135, 31, 0.2);
}
#messageForm button {
  padding: 0.8em 1.2em;
  font-size: calc(1rem + 7px); /* Increased font size */
  font-weight: 600;
  background-color: var(--button-primary-bg);
  color: white;
  border: none;
  border-radius: 6px !important; /* Slight rounded corners, forced */
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
  width: auto;
  position: relative;
  overflow: hidden;
}

#messageForm button:active {
  transform: scale(0.98);
}

#messageForm button.loading {
  background-color: var(--disabled-bg);
  cursor: not-allowed;
}

#messageForm button.loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  margin: auto;
  border: 2px solid white;
  border-radius: 50%;
  border-top-color: transparent;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
 #messageForm button#recordButton {
    padding: 0.8em 0.9em;
    font-size: 1.1rem;
    display: none; /* Ensure it's hidden by default now */
    /* transition: background-color 0.2s ease, box-shadow 0.3s ease-out; */
 }

/*
 #messageForm button#recordButton.recording {
    background-color: #ff3b30; 
    color: white;
    animation: pulseAnimation 1.5s infinite ease-in-out;
 }

 @keyframes pulseAnimation {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(255, 59, 48, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 59, 48, 0);
  }
}
*/

#messageForm button:hover {
  background-color: var(--button-primary-hover-bg);
}
 #messageForm input:disabled, /* Though there's no input in messageForm, keeping for consistency */
 #messageForm button:disabled {
     background-color: var(--disabled-bg);
     cursor: not-allowed;
     opacity: 0.7;
 }

 /* --- Terms Modal Styling --- */
 /* These will be fixed to the viewport. This is usually desired for modals. */
 #termsOverlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: var(--modal-overlay-bg);
  z-index: 999;
}
#termsModal {
  display:none;
  position:fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--container-bg);
  border:1px solid var(--input-border-color);
  border-radius:8px;
  padding: 2em;
  width: 90%;
  max-width: 700px;
  z-index: 1000;
  box-shadow:0 5px 20px var(--container-shadow);
  overflow-y: auto;
  max-height: 85vh;
}
 #termsModal h3 {
    margin-top: 0;
    margin-bottom: 1em;
    color: var(--header-color);
 }
  #termsModal p, #termsModal li {
     margin-bottom: 1em;
     line-height: 1.6;
     color: var(--text-color-light);
  }
   #termsModal strong {
      font-weight: 600;
      color: var(--text-color);
   }
   #termsModal ul {
      padding-left: 25px;
      list-style: disc;
   }
 #termsModal button {
    display: block;
    margin: 1.5em auto 0 auto;
    padding: 0.8em 1.5em;
    font-size: 0.95rem;
    background-color: var(--button-secondary-bg);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s ease;
 }
  #termsModal button:hover {
     background-color: var(--button-secondary-hover-bg);
  }

/* --- Live Recording Interface Styling (Commented Out) --- */
/*
#liveRecordingInterface {
  padding: 5px;
  background-color: var(--chat-input-bg); 
  border-radius: 6px;
  margin-top: -5px; 
  margin-bottom: 15px; 
}

#liveWaveformCanvas {
  background-color: var(--container-bg); 
  display: block; 
  margin-left: auto;
  margin-right: auto;
}

#liveRecordingTimerDisplay {
  font-weight: 500;
}

#liveRecordingStatus {
  min-height: 1.2em; 
}
*/

/* --- Typing Indicator Animation --- */
.typing-indicator {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background-color: var(--message-bot-bg);
  border-radius: 18px;
  border-bottom-left-radius: 4px;
  margin: 0.5em 0;
  max-width: 75%;
  opacity: 0;
  transform: translateY(10px);
  animation: messageSlideIn 0.4s ease-out forwards;
}

.typing-dots {
  display: flex;
  gap: 4px;
}

.typing-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--message-bot-text);
  opacity: 0.4;
  animation: typingDots 1.4s infinite ease-in-out;
}

.typing-dots span:nth-child(1) { animation-delay: 0ms; }
.typing-dots span:nth-child(2) { animation-delay: 160ms; }
.typing-dots span:nth-child(3) { animation-delay: 320ms; }

@keyframes typingDots {
  0%, 60%, 100% {
    opacity: 0.4;
    transform: scale(1);
  }
  30% {
    opacity: 1;
    transform: scale(1.2);
  }
}

/* --- CSS Waveform Animation (Commented Out) --- */
/*
.waveform-css {
  display: flex;
  gap: 4px;
  height: 30px; 
  align-items: flex-end; 
  justify-content: center; 
  margin-bottom: 8px; 
}

.waveform-css div {
  width: 4px; 
  background: var(--button-primary-bg); 
  animation: wave 1s infinite ease-in-out;
  border-radius: 2px; 
}

.waveform-css div:nth-child(2) { animation-delay: 0.1s; }
.waveform-css div:nth-child(3) { animation-delay: 0.2s; }
.waveform-css div:nth-child(4) { animation-delay: 0.3s; }
.waveform-css div:nth-child(5) { animation-delay: 0.4s; }

@keyframes wave {
  0%, 100% { height: 10px; } 
  50% { height: 30px; }    
}

#micQualityHint {
  padding: 0 10px; 
  color: var(--system-message-color, #777); 
}
*/