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

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Added spin animation for initial loader */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


.action-tab {
  display: flex;
  flex-direction: column;
  height: 100%; /* Use 100% to fill parent */
  overflow: hidden; /* Prevent parent scrolling, child will scroll */
  font-size: 0.8em; /* Slightly larger base font */
  background-color: #2b2b2b; /* Ensure background color for the tab */
}

.chat-display {
  flex-grow: 1; /* Allow chat display to take available vertical space */
  overflow-y: auto; /* Enable vertical scrolling ONLY for chat */
  padding: 15px; /* Increased padding */
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: #555 #2b2b2b;
}

.chat-display::-webkit-scrollbar {
    width: 6px;
}
.chat-display::-webkit-scrollbar-track {
    background: #2b2b2b;
}
.chat-display::-webkit-scrollbar-thumb {
    background-color: #555;
    border-radius: 3px;
}

/* --- Initial Loader Styles --- */
.initial-loader-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-grow: 1; /* Make it fill the chat display space */
    height: 100%; /* Needed for flex-grow to work correctly */
    color: #ccc;
    font-size: 0.8em;
    text-align: center; /* Center text below loader */
}

.initial-loader {
    border: 3px solid #444; /* Grey border */
    border-top: 3px solid #ff914d; /* Orange top border for spinner */
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite; /* Use the spin animation */
    margin-bottom: 15px;
}
/* --- End Initial Loader Styles --- */


.message-container {
  margin-bottom: 15px; /* Consistent margin */
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Apply animation to new messages that are not just typing indicators */
.message-container.new-message {
    animation: fadeIn 0.4s ease-out forwards;
}

.query-align {
  align-items: flex-end;
}

.response-align {
  align-items: flex-start;
}

.message {
  padding: 10px 14px; /* Slightly more padding */
  margin-bottom: 4px;
  word-wrap: break-word;
  max-width: 85%; /* Slightly wider max */
  font-size: 1em; /* Relative to .action-tab font-size */
  line-height: 1.4;
}

.query {
  background-color: #555;
  background-image: linear-gradient(to bottom, #6a6a6a, #555, #4a4a4a); /* Subtle gradient */
  color: #fff;
  align-self: flex-end;
  border-radius: 18px 18px 5px 18px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.response {
  background-color: #ff914d;
  background-image: linear-gradient(to bottom, #ffab7a, #ff914d, #f07026); /* Peach gradient */
  color: #111; /* Darker text for better contrast on peach */
  align-self: flex-start;
  border-radius: 18px 18px 18px 5px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* Specific style for loading messages (API loading), using response styling */
.loading-message {
  font-style: italic;
  color: #eee;
  background-color: #444; /* Darker grey for loading */
  background-image: none; /* No gradient for loading */
}

.typing-indicator {
  font-style: italic;
  color: #ccc;
  background-color: #444; /* Match loading background */
  background-image: none;
}

.embed-loading-indicator {
  font-style: italic;
  color: #ccc;
  background-color: #444; /* Match loading background */
  background-image: none;
}

/* Style for error messages, using response base */
.error-message {
  background-color: #6b2f2f; /* Dark red background for errors */
  background-image: linear-gradient(to bottom, #8b3f3f, #6b2f2f, #5a1f1f);
  color: #fdd; /* Light text for contrast on dark red */
  border-radius: 18px 18px 18px 5px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}


.input-area {
  display: flex;
  padding: 10px 15px; /* Adjusted padding */
  border-top: 1px solid #444;
  align-items: center;
  min-height: 50px; /* Ensure minimum height */
  flex-shrink: 0; /* Prevent input area from shrinking vertically */
  background-color: #2b2b2b; /* Match tab background */
}

.message-input {
  flex-grow: 1;
  background-color: #333;
  color: #fff;
  border: 1px solid #555; /* Subtle border */
  /* --- MODIFICATION: Reduced border-radius --- */
  border-radius: 10px; /* Was 20px */
  /* --- END MODIFICATION --- */
  padding: 8px 15px;
  font-size: 1em;
  margin-right: 10px;
  height: 34px; /* Slightly taller input */
  line-height: 1.4;
}

.message-input:focus {
    outline: none;
    border-color: #ff914d;
    box-shadow: 0 0 0 2px rgba(255, 145, 77, 0.3);
}

.message-input:disabled {
    background-color: #444;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Common styles for buttons */
.send-button,
.spark-button {
  background: #222; /* Dark base background */
  color: #ccc; /* Default icon color */
  border: 1px solid #555;
  border-radius: 50%;
  width: 34px; /* Match input height */
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  padding: 0;
  margin-left: 5px; /* Space between buttons */
  flex-shrink: 0; /* Prevent buttons from shrinking */
}

.send-button:hover:not(:disabled), /* Add :not(:disabled) */
.spark-button:hover:not(:disabled) { /* Add :not(:disabled) */
  background: #333;
  border-color: #777;
}

.send-button:disabled,
.spark-button:disabled {
  background-color: #444;
  color: #777;
  border-color: #555;
  cursor: not-allowed;
  opacity: 0.6;
}

/* Specific icon color for send button */
.send-button svg path {
  fill: #ff914d; /* Orange infinity */
}
.send-button:hover:not(:disabled) svg path {
  fill: #fff; /* White on hover */
}
.send-button:disabled svg path {
    fill: #777; /* Grey when disabled */
}


/* Specific icon color for spark button */
.spark-button svg path {
   fill: #6ec6ff; /* Example blue for spark */
}
.spark-button:hover:not(:disabled) svg path {
  fill: #fff; /* White on hover */
}
.spark-button:disabled svg path {
    fill: #777; /* Grey when disabled */
}


/* Style the SVG icons inside the buttons */
.send-button svg,
.spark-button svg {
  width: 18px;
  height: 18px;
}


/* Welcome & Version Card Common Styles */
.neo-welcome-card,
.version-card {
  background-color: #3a3a3a; /* Slightly lighter than chat bubbles */
  color: #eee;
  border-radius: 10px;
  padding: 15px 20px;
  margin: 10px 0 5px 0; /* Adjusted margin */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: background-color 0.3s ease;
  position: relative; /* For arrow positioning in version card */
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  /* Ensure cards don't exceed chat width minus padding */
  max-width: calc(100% - 10px); /* Aligned slightly left from response bubble */
  align-self: flex-start; /* Align with response bubble */
}

.neo-welcome-card {
  /* No animation needed unless specifically desired */
  align-self: center; /* Center welcome card */
  margin-top: 20px;
}

.version-card {
  cursor: pointer;
  background-color: #444; /* Different background for version card */
  opacity: 0; /* Initially hidden for animation */
  transform: translateY(10px); /* Start slightly lower */
  animation: slideUp 0.4s ease-out forwards 0.1s; /* Slide up animation */
  padding: 12px 15px; /* Slightly less padding */
  margin-left: 0; /* Align exactly with response bubble edge */
}

.version-card:hover {
    background-color: #505050;
}

.version-title { /* Used by Welcome Card */
  font-weight: bold;
  font-size: 1.4em; /* Adjusted size */
  margin-bottom: 8px;
}

.version-description { /* Used by Welcome Card */
  font-size: 1.1em; /* Adjusted size */
  line-height: 1.5;
  margin-bottom: 15px; /* Space before button */
}

.neo-orange-text {
  color: #ff914d;
}

.learn-more-button {
  background-color: #ff914d;
  color: #fff;
  border: none;
  padding: 8px 15px;
  border-radius: 20px;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.3s ease;
  font-size: 0.9em;
  margin-top: 10px;
  align-self: flex-start;
}

.learn-more-button:hover {
  background-color: #f07026;
}

/* Version Card Specific Styles */
.version-card-content {
    display: flex;
    align-items: center;
    width: 100%;
}

.version-play-icon {
    fill: #ccc;
    width: 20px; /* Slightly smaller */
    height: 20px;
    margin-right: 10px;
    flex-shrink: 0;
}

.version-card-text {
    flex-grow: 1;
    overflow: hidden; /* Prevents text overflow */
}

.version-card-title {
    font-weight: bold;
    font-size: 1.0em; /* Adjusted size */
    margin-bottom: 2px; /* Less margin */
    color: #fff;
    white-space: nowrap; /* Prevent wrapping */
    overflow: hidden;
    text-overflow: ellipsis; /* Add ellipsis if too long */
}

.version-card-action {
    font-size: 0.85em; /* Adjusted size */
    color: #bbb; /* Lighter grey */
}

/* --- Modals --- */

/* Common Modal Backdrop */
.pricing-modal,
.get-started-modal,
.version-modal { /* Added version-modal here */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85); /* Slightly darker backdrop */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  padding: 20px; /* Add padding to avoid content touching edges */
  box-sizing: border-box;
  opacity: 0; /* Start hidden for animation */
  animation: fadeIn 0.3s ease-out forwards;
}

/* Common Modal Content Base */
.pricing-modal-content,
.get-started-modal-content,
.version-modal-content { /* Added version-modal-content */
  background-color: #1e1e1e;
  color: #fff;
  padding: 30px; /* Default padding */
  border-radius: 12px; /* Slightly less rounded */
  text-align: center;
  width: 100%; /* Let max-width control size */
  position: relative; /* For close button */
  box-shadow: 0 5px 20px rgba(0,0,0,0.4);
  /* Animation */
  opacity: 0;
  transform: scale(0.95);
  animation: fadeIn 0.3s ease-out 0.1s forwards, scaleUp 0.3s ease-out 0.1s forwards;
}

@keyframes scaleUp {
  from { transform: scale(0.95); }
  to { transform: scale(1); }
}


/* Common Modal Close Button */
.pricing-modal-close-button,
.get-started-modal-close-button,
.version-modal-close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #333; /* Button background */
  color: #ccc;
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  font-size: 1.4em; /* Adjust size of 'x' */
  line-height: 28px; /* Center 'x' vertically */
  text-align: center;
  cursor: pointer;
  opacity: 0.8;
  transition: background-color 0.2s ease, opacity 0.2s ease;
  z-index: 11; /* Ensure above modal content */
}

.pricing-modal-close-button:hover,
.get-started-modal-close-button:hover,
.version-modal-close-button:hover {
  background-color: #444;
  opacity: 1;
}

/* Pricing Modal Specific Styles */
.pricing-modal-content {
  max-width: 750px;
  font-size: 0.9em;
}
.pricing-modal-header {
  display: flex;
  justify-content: center; /* Center title now */
  align-items: center;
  margin-bottom: 15px;
  padding-right: 30px; /* Add space so title centers correctly despite absolute close button */
}
.pricing-modal-header h2 {
  margin-bottom: 0;
  font-size: 1.3em; /* Adjusted */
}
/* Pricing Toggle Buttons */
.pricing-toggle {
  background-color: #000;
  color: #fff;
  border: 1px solid #555; /* Darker border */
  padding: 8px 15px;
  border-radius: 20px;
  cursor: pointer;
  margin: 0 4px;
  font-weight: bold;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  font-size: 0.85em;
}
.pricing-toggle.active {
  background-color: #333; /* Active background */
  color: #fff;
  border-color: #ff914d; /* Orange border for active */
}
.pricing-toggle:not(.active):hover {
  background-color: #222;
  border-color: #777;
}
/* Pricing Cards */
.pricing-card {
  background-color: #2b2b2b;
  border-radius: 10px;
  padding: 20px; /* Increased padding */
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 10px; /* Consistent margin */
  width: calc(33.33% - 20px); /* Adjust width based on margins */
  min-width: 180px;
  border: 1px solid #444; /* Darker border */
  box-sizing: border-box;
}

.plan-title { font-size: 1.3em; margin-bottom: 8px; color: #fff; }
.plan-title.pro { color: #ff914d; }
.plan-title.business { color: #a0e7e5; }
.plan-price { font-size: 1.6em; font-weight: bold; margin-bottom: 15px; color: #fff; }
.price-period { font-size: 0.45em; color: #ccc; }
.plan-includes-title { font-weight: bold; margin-bottom: 8px; font-size: 0.9em; color: #fff; }
.plan-features { list-style: none; padding: 0; margin-bottom: 15px; color: #ccc; font-size: 0.85em; } /* Slightly larger features text */
.plan-features li { margin-bottom: 6px; }
.plan-button { /* Base button style */
  background-color: #555;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 25px;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.3s ease, color 0.3s ease;
  text-transform: uppercase;
  font-size: 0.8em;
  width: 100%; /* Make buttons full width of card */
  margin-top: auto; /* Pushes button to bottom */
}
.plan-button:hover {
  background-color: #666;
}
.plan-button.continue-button { /* Hobby button */
   background-color: #4CAF50; /* Green for continue/free */
}
.plan-button.continue-button:hover {
   background-color: #45a049;
}
.plan-button.get-started { /* Pro/Business button */
  background-color: #ff914d;
  color: #111; /* Dark text on orange */
}
.plan-button.get-started:hover {
  background-color: #f07026;
}


/* Get Started Modal Specific Styles */
.get-started-modal-content {
  max-width: 500px;
}
.get-started-modal-header {
  display: flex;
  justify-content: center; /* Center title */
  align-items: center;
  margin-bottom: 15px;
  padding-right: 30px; /* Offset for close button */
}
.get-started-modal-title {
  font-size: 1.8em;
  margin-bottom: 20px; /* Reduced from 20px */
}
.get-started-modal-text {
  font-size: 1em;
  margin-bottom: 30px; /* Reduced from 30px */
  color: #eee;
  line-height: 1.5;
}
.get-started-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
}
.get-started-button {
  background-color: #ff914d;
  color: #111; /* Dark text */
  border: none;
  padding: 12px 25px;
  border-radius: 25px;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.3s ease;
  font-size: 1em;
}
.get-started-button:hover {
  background-color: #f07026;
}

/* Version Display Modal Specific Styles */
.version-modal-content {
  width: 90vw;      /* Allow wider modal */
  height: 85vh;     /* Limit height */
  display: flex;        /* Use flexbox for layout */
  flex-direction: column; /* Stack children vertically */
  padding: 0;           /* REMOVED padding - iframe will go edge-to-edge */
  background-color: #282828; /* Dark background for content area */
  overflow: hidden;     /* Clip iframe corners */
  /* Inherits base styles: color, border-radius, position, box-shadow, animation */
}

.version-modal-close-button {
    position: absolute;
    top: 15px;          /* Position relative to content edge */
    right: 15px;         /* Position relative to content edge */
    z-index: 11;         /* Ensure it's above iframe */
    /* Inherits base styles: background, color, border, radius, size, etc. */
}

.version-iframe {
  flex-grow: 1;         /* Allow iframe to fill available vertical space */
  width: 100%;          /* Take full width within the flex container */
  height: 100%;         /* Take full height within the flex container */
  border: none;         /* Remove iframe border */
  /* Inherits clipping from parent (.version-modal-content) */
}