/* chat.css - Updated with enhanced input area, better contrast, and mobile safe area fix */

/* Chat Messages */
#smartfence-embed-root .chat-messages { 
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

#smartfence-embed-root .message { 
  margin-bottom: 0.75rem;
  opacity: 0;
  animation: fadeInSlide 0.4s ease-out forwards;
  word-wrap: break-word;
}

#smartfence-embed-root .message-content { 
  padding: 1rem 1.25rem; /* Increased from 0.375rem 1rem */
  border-radius: var(--border-radius);
  word-wrap: break-word;
  overflow-wrap: break-word;
  font-size: 1rem; /* Consistent font size for all message types */
  line-height: 1.5;
  width: 100%;
  box-sizing: border-box;
}

/* UPDATED: Welcome message gets full width with border but no background */
#smartfence-embed-root .welcome-message-container { 
  width: 100% !important;
  max-width: 100% !important;
  align-self: stretch !important;
  margin: 0 !important;
}

#smartfence-embed-root .welcome-message-container .message-content { 
  background-color: transparent !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  text-align: center;
  width: 100% !important;
  max-width: 100% !important;
}

/* Regular user messages */
#smartfence-embed-root .user-message { 
  align-self: flex-end;
  width: 100%;
  max-width: 75%;
}

#smartfence-embed-root .user-message .message-content { 
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
  color: white;
  font-size: 1rem;
}

/* Regular bot messages - Enhanced contrast */
#smartfence-embed-root .bot-message { 
  align-self: flex-start;
  width: 100%;
  max-width: 75%;
}

#smartfence-embed-root .bot-message .message-content { 
  background-color: var(--bg-tertiary); /* Now darker grey */
  color: var(--text-primary); /* Now much darker text */
  border: 1px solid var(--border-color); /* Now darker border */
}

/* Error Messages */
#smartfence-embed-root .error-message .message-content { 
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  color: var(--danger-color);
}

/* Typing Indicator - Enhanced contrast */
#smartfence-embed-root .typing-indicator { 
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  color: var(--text-secondary); /* Now darker grey */
  font-style: italic;
  font-size: 0.9375rem;
}

#smartfence-embed-root .typing-dots { 
  display: flex;
  gap: 0.25rem;
}

#smartfence-embed-root .typing-dot { 
  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--text-light); /* Now darker grey */
  border-radius: 50%;
  animation: typing 1.4s infinite ease-in-out;
}

#smartfence-embed-root .typing-dots span { 
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--text-light); /* Now darker grey */
  animation: typing 1.4s infinite ease-in-out;
}

.typing-dot:nth-child(2),
#smartfence-embed-root .typing-dots span:nth-child(2) { 
  animation-delay: 0.2s;
}

.typing-dot:nth-child(3),
#smartfence-embed-root .typing-dots span:nth-child(3) { 
  animation-delay: 0.4s;
}

#smartfence-embed-root .typing-dots span:nth-child(1) { 
  animation-delay: -0.32s;
}

/* Input Area - ENHANCED with better contrast, depth, and MOBILE SAFE AREA FIX */
#smartfence-embed-root .input-area { 
  padding: 1rem 1.4rem; 
  background-color: var(--bg-secondary); /* Changed from bg-primary to bg-secondary for contrast */
  border-top: 2px solid var(--primary-color); /* Changed from border-color to primary-color */
  flex-shrink: 0;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08); /* Added shadow for depth */
  
  /* MOBILE SAFE AREA FIX - Add safe area padding for mobile navigation bars */
  padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  /* Fallback for older browsers */
  padding-bottom: calc(1rem + constant(safe-area-inset-bottom));
}

/* Input Container - ENHANCED with stronger borders and better focus states */
#smartfence-embed-root .input-container { 
  display: flex;
  gap: 0.75rem;
  align-items: center;
  background-color: var(--bg-primary);
  border: 3px solid var(--primary-color); /* Stronger border with primary color */
  border-radius: var(--border-radius);
  padding: 0.75rem;
  transition: var(--transition);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15); /* Primary color shadow */
}

#smartfence-embed-root .input-container:focus-within { 
  border-color: var(--primary-dark);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2), 0 4px 12px rgba(37, 99, 235, 0.25);
  transform: translateY(-1px); /* Subtle lift effect */
}

#smartfence-embed-root .input-container input { 
  flex: 1;
  border: none !important;
  outline: none !important; /* Force remove the browser's default blue outline */
  font-size: 1rem;
  color: var(--text-primary);
  background: transparent;
  padding: 0.5rem 0;
  font-family: var(--font-family);
  font-weight: 500; /* Slightly bolder text */
  box-shadow: none !important; /* Remove any box shadows */
}

#smartfence-embed-root .input-container input:focus { 
  outline: none !important; /* Force remove focus outline */
  border: none !important; /* Force remove any border */
  box-shadow: none !important; /* Force remove any box shadows */
}

#smartfence-embed-root .input-container input:active { 
  outline: none !important; /* Force remove active outline */
  border: none !important; /* Force remove any border */
  box-shadow: none !important; /* Force remove any box shadows */
}

#smartfence-embed-root .input-container input::placeholder { 
  color: var(--text-secondary); /* Now darker grey for better readability */
  font-weight: 400;
}


/* Suggestions */
#smartfence-embed-root .suggestions-container { 
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0.75rem 0;
  padding: 0 0.5rem;
}

/* Styled suggestion cards that look like the option cards */
#smartfence-embed-root .suggestion-card { 
  background-color: var(--bg-primary);
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  padding: 0.875rem;
  cursor: pointer;
  transition: var(--transition);
  min-width: 150px;
  max-width: 250px;
}

#smartfence-embed-root .suggestion-card:hover { 
  border-color: var(--primary-color);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

#smartfence-embed-root .suggestion-card .option-header { 
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

#smartfence-embed-root .suggestion-card .option-header i { 
  color: var(--primary-color);
  font-size: 1.125rem;
}

#smartfence-embed-root .suggestion-card .option-label { 
  font-weight: 500;
  color: var(--text-primary);
  font-size: 0.9375rem;
}

#smartfence-embed-root .suggestion-card .option-description { 
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.4;
}

/* Enhanced suggestion chips with neutral styling and sophisticated hover */
#smartfence-embed-root .suggestion-chip { 
  background: linear-gradient(135deg, var(--bg-primary), var(--bg-tertiary));
  border: 2px solid var(--border-color); /* Neutral border */
  color: var(--text-primary); /* Dark text for better readability */
  border-radius: var(--border-radius-sm);
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

#smartfence-embed-root .suggestion-chip:hover { 
  background: linear-gradient(135deg, var(--text-primary), #374151); /* Dark gradient like other buttons */
  color: white; /* White text for contrast */
  border-color: var(--text-primary); /* Dark border */
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(17, 24, 39, 0.25); /* Dark shadow */
}

#smartfence-embed-root .suggestion-chip:active { 
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Enhanced focus states for accessibility */
.input-container input:focus,
#smartfence-embed-root .quick-action:focus { 
  outline: 3px solid rgba(37, 99, 235, 0.3);
  outline-offset: 2px;
}

/* Add subtle animation to input area when user starts typing */
#smartfence-embed-root .input-container.typing { 
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.2), 0 4px 12px rgba(6, 182, 212, 0.15);
}

/* Responsive adjustments for mobile - Enhanced with safe area support */
@media (max-width: 768px) {
  /* Reduce welcome message padding on mobile */
  #smartfence-embed-root .welcome-message-container .message-content { 
    padding: 0.75rem !important; /* Further reduced from 1rem */
  }
  
  /* Reduce estimator-intro and other canned message padding on mobile */
  #smartfence-embed-root .estimator-intro { 
    padding: 1rem 0.75rem !important; /* Reduced from default 2rem 1rem */
  }
  
  /* Target other canned response containers that might have large padding */
  .fence-info,
  #smartfence-embed-root .services-info { 
    padding: 1rem !important; /* Reduced from 1.5rem */
  }
  
  /* Consistent message content styling for mobile */
  #smartfence-embed-root .message-content { 
    padding: 0.75rem 1rem; /* Slightly reduced for mobile */
    font-size: 0.9375rem; /* Consistent font size for both questions and bot responses */
  }
  
  /* Ensure input area has enough bottom padding on mobile */
  #smartfence-embed-root .input-area { 
    padding: 1rem;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 20px));
    padding-bottom: calc(1rem + constant(safe-area-inset-bottom, 20px));
    /* Minimum 20px fallback for devices that don't report safe area */
    min-padding-bottom: calc(1rem + 20px);
  }
  
  /* Adjust chat messages to account for safe area */
  #smartfence-embed-root .chat-messages { 
    padding: 0.75rem;
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    padding-bottom: calc(0.75rem + constant(safe-area-inset-bottom, 0px));
  }
  
  #smartfence-embed-root .input-container { 
    padding: 0.625rem;
    border-width: 2px;
    /* Add margin-bottom for extra safe area protection */
    margin-bottom: env(safe-area-inset-bottom, 10px);
    margin-bottom: constant(safe-area-inset-bottom, 10px);
  }
  
  #smartfence-embed-root .quick-action { 
    padding: 0.375rem 0.625rem;
    font-size: 0.75rem;
    flex-shrink: 1;
  }
  
  /* Hide icons on mobile */
  #smartfence-embed-root .quick-action i { 
    display: none;
  }
  
  #smartfence-embed-root .quick-actions { 
    gap: 0.25rem;
    flex-wrap: nowrap;
  }
}

@media (max-width: 480px) {
  /* Further reduce welcome message and canned response padding on small screens */
  #smartfence-embed-root .welcome-message-container .message-content { 
    padding: 0.5rem !important; /* Further reduced from 0.75rem */
  }
  
  /* Further reduce estimator-intro padding on small screens */
  #smartfence-embed-root .estimator-intro { 
    padding: 0.75rem 0.5rem !important; /* Further reduced */
  }
  
  /* Further reduce other canned response padding on small screens */
  .fence-info,
  #smartfence-embed-root .services-info { 
    padding: 0.75rem !important; /* Further reduced from 1rem */
  }
  
  /* Consistent message content styling for small screens */
  #smartfence-embed-root .message-content { 
    padding: 0.625rem 0.875rem; /* Slightly reduced for very small screens */
    font-size: 0.875rem; /* Consistent smaller font size for both questions and bot responses */
  }
  
  /* Extra padding for smaller screens */
  #smartfence-embed-root .input-area { 
    padding: 1rem 0.75rem;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 25px));
    padding-bottom: calc(1rem + constant(safe-area-inset-bottom, 25px));
    /* Slightly more padding for very small screens */
    min-padding-bottom: calc(1rem + 25px);
  }
  
  #smartfence-embed-root .input-container { 
    margin-bottom: env(safe-area-inset-bottom, 15px);
    margin-bottom: constant(safe-area-inset-bottom, 15px);
  }
}


/* Add this to your chatbot.css or main CSS file */

/* Specifications Section */
#smartfence-embed-root .specifications-section { 
  background-color: var(--bg-primary, #f8f9fa);
  border-radius: 8px;
  padding: 1.5rem;
  margin: 1.5rem 0;
  border: 1px solid var(--border-color, #e0e0e0);
}

#smartfence-embed-root .specifications-section h4 { 
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--text-primary, #1a1a1a);
}

#smartfence-embed-root .specifications-list { 
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#smartfence-embed-root .specification-item { 
  padding: 0.5rem 0;
  font-size: 0.95rem;
  line-height: 1.5;
}

#smartfence-embed-root .specification-item strong { 
  color: var(--text-primary, #1a1a1a);
  font-weight: 600;
}

/* Cost Breakdown Table */
#smartfence-embed-root .cost-breakdown { 
  background-color: var(--bg-primary, #f8f9fa);
  border-radius: 8px;
  padding: 1.5rem;
  margin: 1.5rem 0;
  border: 1px solid var(--border-color, #e0e0e0);
}

#smartfence-embed-root .cost-breakdown h4 { 
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--text-primary, #1a1a1a);
}

#smartfence-embed-root .breakdown-table { 
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}

#smartfence-embed-root .breakdown-table thead th { 
  padding: 0.75rem;
  border-bottom: 2px solid var(--border-color, #e0e0e0);
  font-weight: 600;
  color: var(--text-primary, #1a1a1a);
  font-size: 0.9rem;
  white-space: nowrap;
}

/* Column-specific styling */
#smartfence-embed-root .breakdown-table .col-description { 
  text-align: left;
  width: 50%;
}

#smartfence-embed-root .breakdown-table .col-quantity { 
  text-align: left;
  width: 20%;
}

#smartfence-embed-root .breakdown-table .col-subtotal { 
  text-align: left;
  width: 30%;
}

#smartfence-embed-root .breakdown-table tbody tr { 
  border-bottom: 1px solid var(--border-color, #e0e0e0);
}

#smartfence-embed-root .breakdown-table tbody td { 
  padding: 0.75rem;
  font-size: 0.95rem;
  vertical-align: top;
}

#smartfence-embed-root .breakdown-description { 
  color: var(--text-primary, #1a1a1a);
  word-wrap: break-word;
}

#smartfence-embed-root .breakdown-quantity { 
  color: var(--text-secondary, #666);
}

#smartfence-embed-root .breakdown-cost { 
  color: var(--text-primary, #1a1a1a);
  font-weight: 500;
  white-space: nowrap;
}

#smartfence-embed-root .breakdown-subtotal td { 
  padding-top: 1rem;
  border-top: 2px solid var(--border-color, #e0e0e0);
  font-weight: 600;
}

#smartfence-embed-root .breakdown-tax td { 
  padding: 0.5rem 0.75rem;
  border-bottom: none;
}

#smartfence-embed-root .breakdown-total td { 
  padding-top: 0.75rem;
  border-top: 2px solid var(--primary-color, #667eea);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--primary-color, #667eea);
}

/* Estimate Disclaimer */
#smartfence-embed-root .estimate-disclaimer { 
  background-color: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 6px;
  padding: 1rem;
  margin: 1.5rem 0;
}

#smartfence-embed-root .estimate-disclaimer p { 
  margin: 0;
  font-size: 0.9rem;
  color: #856404;
  line-height: 1.5;
}

/* Contact Form Section */
#smartfence-embed-root .contact-form-section { 
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 2px solid var(--border-color, #e0e0e0);
}

#smartfence-embed-root .contact-form-section h4 { 
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--text-primary, #1a1a1a);
}

#smartfence-embed-root .contact-form-section > p { 
  color: var(--text-secondary, #666);
  margin-bottom: 1.5rem;
}

#smartfence-embed-root .contact-form .form-row { 
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

#smartfence-embed-root .contact-form .form-group { 
  flex: 1;
  display: flex;
  flex-direction: column;
}

#smartfence-embed-root .contact-form .form-group.half-width { 
  flex: 0 0 calc(50% - 0.5rem);
}

#smartfence-embed-root .contact-form label { 
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: var(--text-primary, #1a1a1a);
  font-size: 0.9rem;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
#smartfence-embed-root .contact-form textarea { 
  padding: 0.75rem;
  border: 1px solid var(--border-color, #e0e0e0);
  border-radius: 6px;
  font-size: 0.95rem;
  font-family: inherit;
  transition: border-color 0.2s;
}

.contact-form input:focus,
#smartfence-embed-root .contact-form textarea:focus { 
  outline: none;
  border-color: var(--primary-color, #667eea);
}

#smartfence-embed-root .contact-form textarea { 
  resize: vertical;
  min-height: 100px;
}

#smartfence-embed-root .radio-group { 
  display: flex;
  gap: 1rem;
  margin-top: 0.5rem;
}

#smartfence-embed-root .radio-label { 
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

#smartfence-embed-root .radio-label input[type="radio"] { 
  cursor: pointer;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  #smartfence-embed-root .breakdown-table { 
    font-size: 0.85rem;
  }
  
  .breakdown-table thead th,
  #smartfence-embed-root .breakdown-table tbody td { 
    padding: 0.5rem 0.25rem;
  }
  
  .specifications-section,
  #smartfence-embed-root .cost-breakdown { 
    padding: 1rem;
  }
  
  #smartfence-embed-root .contact-form .form-row { 
    flex-direction: column;
  }
  
  #smartfence-embed-root .contact-form .form-group.half-width { 
    flex: 1;
  }
}

/* Very small screens */
@media (max-width: 480px) {
  #smartfence-embed-root .breakdown-table thead { 
    display: none;
  }
  
  #smartfence-embed-root .breakdown-table tbody tr { 
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: white;
    border-radius: 6px;
  }
  
  #smartfence-embed-root .breakdown-table tbody td { 
    padding: 0.25rem 0;
    text-align: left !important;
  }
  
  #smartfence-embed-root .breakdown-table tbody td:before { 
    content: attr(data-label);
    font-weight: 600;
    margin-right: 0.5rem;
  }
}


/* Clickable Contact Links */
#smartfence-embed-root .contact-link { 
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s ease;
  border-bottom: 1px solid transparent;
}

#smartfence-embed-root .contact-link:hover { 
  color: var(--primary-dark);
  border-bottom-color: var(--primary-color);
}

#smartfence-embed-root .phone-link::before { 
  content: '📞 ';
  font-size: 0.9em;
}

#smartfence-embed-root .email-link::before { 
  content: '✉️ ';
  font-size: 0.9em;
}

/* Mobile optimizations for clickable links */
@media (max-width: 768px) {
  #smartfence-embed-root .contact-link { 
    display: inline-block;
    padding: 0.2rem 0.4rem;
    margin: 0.1rem;
    border-radius: 4px;
    background-color: rgba(var(--primary-rgb), 0.1);
  }
  
  #smartfence-embed-root .contact-link:active { 
    background-color: rgba(var(--primary-rgb), 0.2);
    transform: scale(0.98);
  }
}