/* Mobile Responsive Fixes for Questionnaire Thank You Page */

/* Desktop default styles */
.chatbot-thank-you-container {
  min-height: 600px;
}

.chat-messages-container {
  height: 384px; /* h-96 equivalent */
  min-height: 500px;
}

/* Mobile responsive fixes - NO SCROLLING GUARANTEED */
@media (max-width: 640px) {
  /* AGGRESSIVE: Ensure chatbot container fits viewport completely */
  div[style*="min-height: 600px"],
  .max-w-md.mx-auto.bg-white.rounded-3xl {
    min-height: auto !important;
    max-height: 100vh !important;
    height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    border-radius: 0 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    z-index: 1000 !important;
  }
  
  /* Chat header - fixed height */
  .bg-gradient-to-r.from-blue-600.to-purple-700 {
    flex-shrink: 0 !important;
    padding: 12px 16px !important;
  }
  
  /* Chat messages area - flexible but controlled */
  .bg-gray-50.px-4.py-6.h-96.overflow-y-auto,
  .bg-gray-50.px-4.py-6.overflow-y-auto {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 12px 16px !important;
  }
  
  /* Call button container - fixed at bottom */
  .px-4.py-6.bg-white.border-t {
    padding: 12px 16px !important;
    position: relative !important;
    flex-shrink: 0 !important;
    margin-top: auto !important;
    box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1) !important;
  }
  
  /* Mobile call button styling - target multiple possible button classes */
  .inline-flex.items-center.justify-center.gap-3.text-white,
  a[href^="tel:"].inline-flex {
    gap: 8px !important;
    padding: 12px 16px !important;
    font-size: 15px !important;
    border-radius: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: nowrap;
    overflow: hidden;
  }
  
  /* Mobile call button text */
  .inline-flex.items-center.justify-center.gap-3.text-white span,
  a[href^="tel:"].inline-flex span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
    flex: 1;
  }
  
  /* Mobile call button icon */
  .inline-flex.items-center.justify-center.gap-3.text-white svg,
  a[href^="tel:"].inline-flex svg {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0;
  }
  
  /* Custom thank you page mobile fixes */
  .text-center.mt-6 a[href^="tel:"] {
    gap: 8px !important;
    padding: 12px 16px !important;
    font-size: 15px !important;
    border-radius: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Hide any overflow from parent containers */
  #slide-final {
    overflow: hidden !important;
    height: 100vh !important;
    position: relative !important;
  }
  
  /* Ensure body doesn't create scroll */
  body {
    overflow-x: hidden !important;
  }
}

@media (max-width: 480px) {
  /* Extra small screens - even more aggressive */
  .inline-flex.items-center.justify-center.gap-3.text-white,
  a[href^="tel:"].inline-flex,
  .text-center.mt-6 a[href^="tel:"] {
    padding: 10px 12px !important;
    font-size: 14px !important;
    gap: 6px !important;
  }
  
  .inline-flex.items-center.justify-center.gap-3.text-white span,
  a[href^="tel:"].inline-flex span,
  .text-center.mt-6 a[href^="tel:"] span {
    max-width: 150px;
    font-size: 13px;
  }
  
  /* Chat header even more compact */
  .bg-gradient-to-r.from-blue-600.to-purple-700 {
    padding: 8px 12px !important;
  }
  
  /* Chat messages more compact */
  .bg-gray-50.px-4.py-6.h-96.overflow-y-auto,
  .bg-gray-50.px-4.py-6.overflow-y-auto {
    padding: 8px 12px !important;
  }
  
  /* Button container more compact */
  .px-4.py-6.bg-white.border-t {
    padding: 8px 12px !important;
  }
}

/* Text truncation for call buttons with very long text */
@media (max-width: 380px) {
  a[href^="tel:"] span {
    max-width: 120px !important;
    font-size: 12px !important;
  }
}

/* Fix for sticky positioning on iOS Safari */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 640px) {
    .px-4.py-6.bg-white.border-t {
      position: relative !important;
    }
  }
}