/* Follow-up Question Suggestions */
.chatbot-suggestions {
  position: relative; /* Changed from absolute to relative positioning */
  bottom: auto; /* Remove bottom positioning */
  left: 0;
  right: 0;
  margin: 0.5rem 7.5% 1rem 7.5%; /* Reduced space above */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  display: block; /* Ensure display is block */
  visibility: hidden; /* Use visibility for better animation */
  transition: max-height 0.3s ease, opacity 0.2s ease, transform 0.2s ease, visibility 0.3s ease;
  transform: translateY(-10px); /* Slight upward position when hidden */
  padding: 0;
  background: transparent;
  z-index: 100; /* Increased from 10 */
  pointer-events: none;
}

.chatbot-suggestions.show {
  max-height: 100px; /* Back to original */
  opacity: 1;
  visibility: visible; /* Make visible */
  transform: translateY(0);
  padding: 0.3rem 0; /* Less padding since buttons are smaller */
  min-height: auto;
  overflow: visible;
  pointer-events: auto;
}

/* Add a backdrop blur container */
.chatbot-suggestions::before {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  background: rgba(2, 25, 59, 0.75); /* Semi-transparent background */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 12px;
  z-index: -1;
  display: none; /* Hide the backdrop blur for cleaner appearance */
}

.suggestions-container {
  display: flex;
  flex-direction: column;
  gap: 0.25rem; /* Smaller gap between buttons */
  flex: 1;
  position: relative;
  z-index: 1;
  padding: 0; /* No extra padding since parent already has margins */
}

/* Vertically center single suggestions */
.chatbot-suggestions[data-suggestion-count="1"] .suggestions-container {
  justify-content: center;
  align-items: stretch; /* Keep full width */
}

/* Adjust padding when only one suggestion */
.chatbot-suggestions[data-suggestion-count="1"].show {
  padding: 0.25rem 0 0.15rem 0; /* Reduced padding for single suggestion */
  max-height: 45px; /* Back to original height */
}

/* Adjust for two suggestions */
.chatbot-suggestions[data-suggestion-count="2"].show {
  padding: 0.15rem 0 0.1rem 0;
  max-height: 85px; /* More room for 2 suggestions */
  min-height: 70px; /* Ensure minimum space */
}

/* Cool suggestion button with glow animations */
.suggestion-button {
  background: rgba(14, 165, 233, 0.15);
  border: 1px solid rgba(14, 165, 233, 0.3);
  border-radius: 20px; /* Much rounder edges */
  padding: 0.4rem 1rem;
  color: rgba(14, 165, 233, 0.9);
  font-size: 0.75rem; /* Smaller text */
  line-height: 1.4;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-weight: 400;
  display: block;
  width: 100%;
  position: relative;
  overflow: visible;
  min-height: auto;
  box-sizing: border-box;
  word-wrap: break-word;
  white-space: normal;
  hyphens: none;
  word-break: normal;
  overflow-wrap: break-word;
  margin: 0.2rem 0;
  transition: all 0.3s ease;
  opacity: 1;
}

/* Glow animation state */
.suggestion-glow {
  opacity: 1 !important;
  transform: translateY(0) !important;
  box-shadow: 
    0 0 10px rgba(14, 165, 233, 0.3),
    0 2px 4px rgba(14, 165, 233, 0.15);
}

/* Hover effects */
.suggestion-button:hover {
  background: rgba(14, 165, 233, 0.25);
  color: rgba(14, 165, 233, 1);
  transform: translateY(-1px);
  box-shadow: 
    0 0 15px rgba(14, 165, 233, 0.4),
    0 2px 8px rgba(14, 165, 233, 0.2);
}

.suggestion-button:active {
  transform: translateY(-1px) scale(1.01);
  background: rgba(14, 165, 233, 0.15);
}

/* Simplified glow effect - no keyframes needed */

/* Loading state for suggestions */
.suggestion-loading {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.08), rgba(14, 165, 233, 0.10));
  border: 1px solid rgba(14, 165, 233, 0.12);
  border-radius: 8px;
  padding: 0.3rem 0.5rem;
  color: rgba(14, 165, 233, 0.7);
  font-size: 0.72rem;
  line-height: 1.25;
  text-align: left;
  font-family: inherit;
  font-weight: 400;
  display: block;
  width: 100%;
  position: relative;
  overflow: hidden;
  min-height: 1.5rem;
  box-sizing: border-box;
  backdrop-filter: blur(3px);
  margin-left: -0.3rem;
  padding-left: 0.8rem;
  animation: pulse 1.5s ease-in-out infinite;
}

/* Empty pulsing bubble for contextual loading */
.suggestion-loading-pulse {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.08), rgba(14, 165, 233, 0.12));
  border: 1px solid rgba(14, 165, 233, 0.15);
  border-radius: 8px;
  padding: 0;
  color: transparent;
  font-size: 0.72rem;
  line-height: 1.25;
  display: block;
  width: 100%;
  position: relative;
  overflow: hidden;
  min-height: 1.8rem;
  box-sizing: border-box;
  backdrop-filter: blur(3px);
  margin-left: -0.3rem;
  animation: contextualPulse 1.8s ease-in-out infinite;
}

.loading-dots::after {
  content: '...';
  animation: loadingDots 1.5s steps(4, end) infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 0.9; }
}

@keyframes contextualPulse {
  0%, 100% { 
    opacity: 0.4; 
    transform: scale(1);
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.06), rgba(14, 165, 233, 0.10));
  }
  50% { 
    opacity: 0.8; 
    transform: scale(1.02);
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.12), rgba(14, 165, 233, 0.18));
  }
}

@keyframes loadingDots {
  0% { content: 'Thinking'; }
  25% { content: 'Thinking.'; }
  50% { content: 'Thinking..'; }
  75% { content: 'Thinking...'; }
}

@media (max-width: 768px) {
  .chatbot-suggestions {
    display: none !important; /* Hide suggestions completely on mobile/tablet */
  }
}

@media (max-width: 480px) {
  .chatbot-suggestions {
    display: none !important; /* Hide suggestions completely on small mobile */
  }
}