@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

body {
  font-family: 'Poppins', sans-serif;
}

.chat-bubble {
  max-width: 80%;
  border-radius: 18px;
  padding: 12px 16px;
  margin-bottom: 12px;
  position: relative;
}

.user-bubble {
  background: #e0e7ff;
  border-bottom-right-radius: 4px;
  margin-left: auto;
}

.ai-bubble {
  background: #f3f4f6;
  border-bottom-left-radius: 4px;
  margin-right: auto;
}

.pulse {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@media (max-width: 640px) {
  .chat-bubble {
    font-size: 14px;
    padding: 10px 12px;
  }
}

button, a {
  transition: transform 0.2s ease-in-out;
}

button:hover, a:hover {
  transform: scale(1.02);
}

#chatBox {
  padding: 1rem;
  border-radius: 1rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

#chatBox .chat-bubble {
  /* Keep general chat bubble margins if necessary, or remove if handled by Tailwind/flex parents */
  /* margin-left: 0; */ /* Example: Potentially remove if parent flex handles spacing */
  /* margin-right: 0; */
}

/*
  The following specific ID-based styles for #userInput and #sendBtn are being removed
  as they are now handled by the .chat-input-container descendant selectors
  which are designed to be the primary styling method for the input group.
  This reduces specificity conflicts and centralizes the input group styling.
*/
/*
#userInput {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

#sendBtn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
*/

/* General media query for chat bubbles and other elements if needed */
@media (max-width: 640px) {
  #chatBox {
    padding: 0.75rem; /* Tailwind: sm:p-3 */
  }
  #chatBox .chat-bubble {
    font-size: 14px; /* Tailwind: text-sm */
  }
  /* .chat-input-container specific margin for mobile can be handled by Tailwind on the element itself if needed */
  /* Example: <div id="inputRow" class="chat-input-container mt-4 sm:mb-4"> */
}


/* === Consolidated & Refined Chat Input Styles === */
/* This section aims to replace the "V2", "Final", and "Aggressive" fixes with a cleaner approach. */
/* We rely on Tailwind for base styling and add specific structural CSS here. */

/*
  The #chatBox specific styling with !important from "V2 Fixes" is removed.
  Tailwind utility classes on the #chatBox element in HTML should be preferred.
  If overrides are needed, they should be specific and justified.
  Example: <div id="chatBox" class="h-96 overflow-y-auto mb-4 p-4 bg-gray-50 rounded-lg sm:p-6">
  Current HTML for #chatBox: <div id="chatBox" class="h-96 overflow-y-auto mb-4 p-4 bg-gray-50 rounded-lg">
  The style.css had:
  #chatBox {
    padding: 1rem !important; // p-4
    border-radius: 1rem !important; // rounded-xl (close enough to 1rem)
    background-color: #f9fafb !important; // bg-gray-50
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important; // shadow-md or shadow-lg
    margin-bottom: 1rem !important; // mb-4
  }
  These are mostly achievable with Tailwind. The custom CSS version is more specific.
  For now, I will keep the #chatBox styling from V2 fixes but remove !important where Tailwind likely matches.
*/

#chatBox {
  padding: 1rem; /* Tailwind: p-4 */
  border-radius: 1rem; /* Tailwind: rounded-xl */
  background-color: #f9fafb; /* Tailwind: bg-gray-50 (already in HTML) */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* Tailwind: shadow-md or similar */
  margin-bottom: 1rem; /* Tailwind: mb-4 (already in HTML) */
}

#chatBox .chat-bubble {
  /* This was in V2, if it's still needed for specific spacing not covered by user-bubble/ai-bubble margins */
  margin-left: 0.5rem !important; /* Consider if this is needed or if flex spacing on parent is better */
  margin-right: 0.5rem !important;
}


/* Removed #sendBtn:after - it was adding unwanted space */

/* Media query from V2, specific to #chatBox and .chat-bubble inside it */
@media (max-width: 640px) {
  #chatBox {
    padding: 0.75rem !important; /* Overrides p-4 for small screens */
  }

  #chatBox .chat-bubble {
    font-size: 14px !important; /* Overrides general bubble font size for small screens */
  }
  /*
  .chat-input-container {
    margin-bottom: 1rem !important; // This can be a utility class on the HTML element
  }
  */
}


/* This is the primary style for the input group, replacing previous attempts. */
.chat-input-container {
  display: flex !important; /* Using !important to ensure it overrides any inline styles from JS if any, or Tailwind specificity */
  flex-direction: row !important;
  align-items: stretch !important; /* Changed from center to stretch for inputs/buttons to fill height */
  /* width: 100% !important; */ /* Removed to allow flex behavior to determine width based on parent */
  margin-top: 1rem !important; /* Tailwind: mt-4 */
  margin-bottom: 10px !important; /* Added bottom margin for spacing */
  padding: 0 !important;
  box-sizing: border-box !important;
}

.chat-input-container input#userInput { /* Increased specificity slightly */
  /* flex-grow: 1 !important; */ /* Removed to rely on Tailwind's flex-1 utility */
  min-width: 0 !important; /* Allow input to shrink below its default intrinsic min-width in a flex container */
  border-width: 1px !important; /* Tailwind: border */
  border-style: solid !important;
  /* Assuming border color is handled by Tailwind's default or focus:ring-primary */
  border-radius: 0.5rem 0 0 0.5rem !important; /* Tailwind: rounded-l-lg */
  height: 48px !important; /* Fixed height */
  font-size: 16px !important; /* Tailwind: text-base */
  padding: 0 1rem !important; /* Tailwind: px-4 */
  box-sizing: border-box !important;
  /* focus styles are primarily handled by Tailwind's focus:ring-2 focus:ring-primary on the HTML element */
}

.chat-input-container button#sendBtn { /* Increased specificity slightly */
  height: 48px !important; /* Fixed height, to match input */
  padding: 0 1rem !important; /* Tailwind: px-4 or similar */
  border-radius: 0 0.5rem 0.5rem 0 !important; /* Tailwind: rounded-r-lg */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important; /* Slightly larger than text-base, could be text-lg */
  flex-shrink: 0 !important; /* Prevent button from shrinking */
  /* Background and text color are handled by Tailwind classes on the HTML element */
  /* border for button should match input or be removed if visually not desired */
  border-width: 1px !important;
  border-style: solid !important;
  border-left-width: 0 !important; /* Remove left border to abut input field cleanly */
  /* Assuming border color matches input or is transparent */
}

/* Ensure full force hide for chat input, this is important for JS toggling */
#inputRow.hidden {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Add scroll margin to account for sticky header */
#demo,
#pricing {
  scroll-margin-top: 72px; /* Adjust if header height is different */
}

.pricing-plan-header {
    height: 150px !important; /* Updated to a fixed height */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center; /* Ensure text within is centered if it wraps */
}

.pricing-features-list {
    min-height: 180px; /* Ensures the features list area has a consistent minimum height */
}

/* Ensure pricing buttons are visible */
div.p-8.flex.flex-col > a.block[href^="https://buy.stripe.com"] {
    opacity: 1;
    visibility: visible;
    /* We assume Tailwind classes on the button element in HTML will handle background, color, padding etc. */
    /* If specific overrides are still needed, they could be added here, e.g.
       text-decoration: none; To ensure it looks like a button if other 'a' styles interfere
    */
}