body {
}

/* Chatbot Toggle Button - High z-index but below active windows */
.chatbot-toggle-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 2147483644; /* Below chat windows but above everything else */
  transition: opacity 0.3s ease, visibility 0.3s ease; /* Smooth transition for hiding */
}

  /* Hide toggle button when chat or contact form is open - WORKS ON ALL SCREEN SIZES */
  .chatbot-toggle-container.hide-toggle {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

#chatbot-toggle {
  background-color: var(--customer_color) !important;
  color: var(--adaptive-text-color) !important;
  border-radius: 50%;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  border: none;
  cursor: pointer;
  z-index: 2147483644; /* Below chat windows */
}

  #chatbot-toggle img {
    /* Default state */
    filter: none;
  }

  /* Invert image when background is light */
  #chatbot-toggle.light-background img {
    filter: invert(1);
  }

  /* Keep normal when background is dark */
  #chatbot-toggle.dark-background img {
    filter: none;
  }

/* Chat Window - Highest z-index when open */
#chat-window {
  display: none;
  position: fixed;
  bottom: 90px;
  right: -370px; /* Start position off-screen right */
  width: 350px;
  max-width: calc(100vw - 40px);
  height: 500px;
  max-height: 60vh;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border: 1px solid #e5e7eb;
  z-index: 2147483646; /* Higher than toggle button when open */
  transition: right 0.3s ease-in-out; /* Smooth slide transition */
}

  /* Chat Window when shown - slides in from right */
  #chat-window.show {
    right: 20px; /* End position */
    z-index: 2147483646; /* Ensure it's above toggle */
  }

/* Chat Header */
.chat-header {
  background-color: var(--customer_color) !important;
  color: var(--adaptive-text-color) !important;
  padding: 16px;
  padding-right: 50px; /* Make room for close button */
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  position: relative; /* For absolute positioning of close button */
}

.chat-header-content {
  display: flex;
  align-items: center;
}

.chat-header-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

/* Enhanced close button styling for both chat and contact form */
.chat-close-btn,
.contact-form-close-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background-color: rgba(255, 255, 255, 0.2); /* Semi-transparent white background */
  border: 2px solid rgba(255, 255, 255, 0.5); /* White border for visibility */
  color: #ffffff !important; /* Always white for contrast */
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10; /* Ensure it's above header content */
  font-size: 20px;
  line-height: 1;
  padding: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
}

  /* Hover effect for close buttons */
  .chat-close-btn:hover,
  .contact-form-close-btn:hover {
    background-color: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.8);
    transform: scale(1.1); /* Slightly enlarge on hover */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
  }

  /* Active/click effect */
  .chat-close-btn:active,
  .contact-form-close-btn:active {
    transform: scale(0.95);
  }

  /* Ensure the X icon is centered and visible */
  .chat-close-btn i,
  .contact-form-close-btn i {
    font-size: 18px;
    font-weight: bold;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); /* Text shadow for better visibility */
  }

/* Alternative styling for light backgrounds */
.chat-header.light-background .chat-close-btn,
.contact-form-header.light-background .contact-form-close-btn {
  background-color: rgba(0, 0, 0, 0.1);
  border-color: rgba(0, 0, 0, 0.3);
}

  .chat-header.light-background .chat-close-btn i,
  .contact-form-header.light-background .contact-form-close-btn i {
    color: #333333 !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
  }

  .chat-header.light-background .chat-close-btn:hover,
  .contact-form-header.light-background .contact-form-close-btn:hover {
    background-color: rgba(0, 0, 0, 0.2);
    border-color: rgba(0, 0, 0, 0.5);
  }

/* Chat Messages */
#chat-messages {
  height: calc(100% - 150px);
  overflow-y: auto;
  padding: 16px;
  background-color: #f9fafb;
}

.chat-message-container {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 16px;
}

.chat-message {
  max-width: 75%;
  padding: 12px;
  border-radius: 8px;
  background-color: white;
  border: 1px solid #e5e7eb;
  border-bottom-left-radius: 0;
  color: #374151;
}

/* Disclaimer Info */
#disclaimer-info {
  padding: 8px 12px;
  border-top: 1px solid #e5e7eb;
}

.disclaimer-content {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 4px;
  font-size: 10px;
  color: #6b7280;
}

.disclaimer-text {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Cost Display */
#cost-info {
  padding: 8px 12px;
  border-top: 1px solid #e5e7eb;
  display: none;
}

.cost-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
  font-size: 12px;
  color: #6b7280;
}

.cost-info-left {
  display: flex;
  align-items: center;
}

.cost-icon {
  margin-right: 4px;
}

.cost-progress-bar {
  height: 4px;
  background-color: #e5e7eb;
  border-radius: 2px;
  overflow: hidden;
}

#cost-progress {
  height: 100%;
  background-color: #4f46e5;
  width: 0%;
  transition: width 0.3s ease;
}

/* Chat Input */
.chat-input-container {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px;
  border-top: 1px solid #e5e7eb;
  background-color: white;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

#chat-form {
  display: flex;
  gap: 8px;
}

#chat-input {
  flex: 1;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 14px;
  outline: none;
}

  /* Input field over limit styling */
  #chat-input.over-limit {
    border-color: #dc2626 !important;
    box-shadow: 0 0 5px rgba(220, 38, 38, 0.3) !important;
  }

#send-message {
  padding: 8px 12px;
  min-width: 44px;
  border-radius: 6px;
  background-color: var(--customer_color) !important;
  border: 1px solid var(--customer_color) !important;
  color: var(--adaptive-text-color) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

  /* Submit button disabled styling */
  #send-message:disabled,
  #send-message.disabled {
    background-color: #9ca3af !important;
    color: #6b7280 !important;
    cursor: not-allowed !important;
    opacity: 0.5 !important;
    pointer-events: none !important;
  }

    #send-message:disabled:hover,
    #send-message.disabled:hover {
      background-color: #9ca3af !important;
      color: #6b7280 !important;
      cursor: not-allowed !important;
      transform: none !important;
      box-shadow: none !important;
    }

#character-count {
  display: block;
  font-size: 12px;
  text-align: right;
  margin-top: 4px;
  color: #6b7280;
}

#character-limit-message {
  display: none;
  color: #dc2626;
  font-size: 12px;
  margin-top: 4px;
}

/* Contact Form Window - Initially hidden but properly configured */
#contact-form-window {
  display: none; /* Start hidden */
  position: fixed;
  bottom: 90px;
  right: -370px; /* Start position off-screen right */
  width: 350px;
  max-width: calc(100vw - 40px);
  height: 500px;
  max-height: 60vh;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border: 1px solid #e5e7eb;
  z-index: 2147483647; /* Highest z-index to ensure it's on top */
  transition: right 0.3s ease-in-out; /* Smooth slide transition */
}

  /* Contact form when shown - Desktop and Mobile */
  #contact-form-window.show {
    display: flex !important; /* Force display as flex when shown */
    flex-direction: column;
    right: 20px; /* End position for desktop */
    z-index: 2147483647; /* Ensure maximum z-index when shown */
  }

.contact-form-header {
  background-color: var(--customer_color) !important;
  color: var(--adaptive-text-color) !important;
  padding: 16px;
  padding-right: 50px; /* Make room for close button */
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  flex-shrink: 0; /* Prevent header from shrinking */
  position: relative; /* For absolute positioning of close button */
}

.contact-form-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

/* Contact Form Content - Updated for proper scrolling and sticky footer */
.contact-form-content {
  flex: 1; /* Take remaining space */
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Prevent overflow on the container */
  position: relative;
  height: calc(100% - 56px); /* Account for header height */
}

/* Form container with scrolling */
#chatbot-contact-form {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  padding: 16px;
  padding-bottom: 140px; /* Space for sticky footer */
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

/* Contact Form Fields */
.form-group {
  margin-bottom: 12px;
}

.form-label {
  display: block;
  margin-bottom: 4px;
  font-weight: 500;
}

.form-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  box-sizing: border-box;
}

.form-textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  resize: vertical;
  box-sizing: border-box;
}

/* Sticky footer positioned at absolute bottom */
.form-sticky-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 1));
  border-top: 1px solid #e5e7eb;
  padding: 12px 16px;
  z-index: 10;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

/* Add a subtle background to the disclaimer for better readability */
.grecaptcha-info {
  font-size: 11px;
  color: #6b7280;
  text-align: center;
  margin-bottom: 10px;
  padding: 8px;
  background-color: #f9fafb;
  border-radius: 4px;
  line-height: 1.4;
}

  .grecaptcha-info a {
    color: #007bff !important;
    text-decoration: none;
  }

    .grecaptcha-info a:hover {
      color: #0056b3 !important;
      text-decoration: underline !important;
    }

/* Submit button in sticky footer */
.form-sticky-footer .form-submit-btn {
  width: 100%;
  padding: 10px;
  background-color: var(--customer_color) !important;
  border: 1px solid var(--customer_color) !important;
  color: var(--adaptive-text-color) !important;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
}

/* Form button wrapper (legacy support) */
.form-button-wrapper {
  position: sticky;
  bottom: 0;
  background-color: white;
  padding: 10px 0;
  margin-top: 10px;
  border-top: 1px solid #e5e7eb;
}

/* Legacy form submit button */
.form-submit-btn {
  width: 100%;
  padding: 10px;
  background-color: var(--customer_color) !important;
  border: 1px solid var(--customer_color) !important;
  color: var(--adaptive-text-color) !important;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
}

/* Classic Captcha Override */
#classicCaptcha {
  display: none !important;
}

.ai-liability {
  font-size: .75rem;
  font-style: italic;
}

/* Override Bootstrap text-light for chatbot links */
#contact-form-window .grecaptcha-info a {
  color: #007bff !important; /* Bootstrap primary blue */
}

  #contact-form-window .grecaptcha-info a:hover {
    color: #0056b3 !important; /* Darker blue on hover */
    text-decoration: underline !important;
  }

/* Ensure navbar and other fixed elements don't interfere */
.container-fullwidth.fixed-top {
  z-index: 1030 !important; /* Bootstrap's default navbar z-index */
}

.navbar {
  z-index: 1030 !important;
}

/* Ensure modals don't overlap chatbot */
.modal {
  z-index: 1050 !important; /* Keep modals below chatbot */
}

.modal-backdrop {
  z-index: 1040 !important; /* Keep backdrop below chatbot */
}

/* Ensure loading indicator is also visible but below chatbot */
#loadingImg {
  z-index: 2147483640 !important; /* Below chatbot but above most content */
}

/* Mobile-specific styles - Updated for iOS Safari 16+ with slide transitions */
@media screen and (max-width: 768px) {
  .chatbot-toggle-container {
    bottom: 15px;
    right: 15px;
    z-index: 2147483644; /* Below chat windows on mobile */
  }

  #chatbot-toggle {
    width: 50px;
    height: 50px;
    z-index: 2147483644; /* Below chat windows on mobile */
  }

    #chatbot-toggle img {
      height: 50px !important;
      width: 50px !important;
    }

  #chat-window {
    bottom: 10px !important;
    left: 10px !important;
    right: calc(-100vw - 10px) !important; /* Start completely off-screen */
    width: calc(100vw - 20px) !important;
    max-width: none !important;
    height: calc(100vh - 100px) !important; /* Changed from 70vh */
    max-height: 500px !important;
    min-height: 400px !important;
    z-index: 2147483646; /* Higher than toggle on mobile */
    transition: right 0.3s ease-in-out, transform 0.3s ease-in-out; /* Smooth slide */
  }

    #chat-window.show {
      right: 10px !important; /* Slide into view */
      left: 10px !important;
      transform: translateX(0); /* Ensure it's in the correct position */
      z-index: 2147483646; /* Ensure it's above toggle when shown */
    }

  /* Contact form specific mobile adjustments */
  #contact-form-window {
    bottom: 10px !important;
    left: 10px !important;
    right: calc(-100vw - 10px) !important; /* Start completely off-screen */
    width: calc(100vw - 20px) !important;
    max-width: none !important;
    height: calc(100vh - 100px) !important; /* Changed from 70vh */
    max-height: 500px !important;
    min-height: 400px !important; /* Ensure minimum height */
    z-index: 2147483647; /* Highest z-index on mobile */
    transition: right 0.3s ease-in-out, transform 0.3s ease-in-out; /* Smooth slide */
  }

    #contact-form-window.show {
      display: flex !important; /* Use flex when shown */
      flex-direction: column;
      right: 10px !important; /* Slide into view on mobile */
      transform: translateX(0); /* Ensure it's in the correct position */
      z-index: 2147483647; /* Ensure it's above everything when shown */
    }

  /* Ensure proper layout on mobile */
  .contact-form-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    height: calc(100% - 56px); /* Account for header */
  }

  /* Form with scrolling on mobile */
  #chatbot-contact-form {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    padding: 16px;
    padding-bottom: 140px; /* Space for sticky footer */
    -webkit-overflow-scrolling: touch;
  }

  /* Sticky footer at absolute bottom on mobile */
  .form-sticky-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 16px;
    background-color: white;
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.05);
    border-top: 1px solid #e5e7eb;
    z-index: 20;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
  }

  /* Mobile close button adjustments */
  .chat-close-btn,
  .contact-form-close-btn {
    width: 36px; /* Slightly larger on mobile for easier tapping */
    height: 36px;
    top: 10px;
    right: 10px;
  }
}

/* Very small screens */
@media screen and (max-width: 480px) {
  #chat-window {
    bottom: 5px !important;
    left: 5px !important;
    right: calc(-100vw - 5px) !important; /* Start completely off-screen */
    width: calc(100vw - 10px) !important;
    height: calc(100vh - 80px) !important; /* Changed from 65vh */
    max-height: 450px !important;
    z-index: 2147483646; /* High z-index on small screens */
    transition: right 0.3s ease-in-out, transform 0.3s ease-in-out; /* Smooth slide */
  }

    #chat-window.show {
      right: 5px !important; /* Slide into view */
      left: 5px !important;
      transform: translateX(0); /* Ensure it's in the correct position */
      z-index: 2147483646; /* Above toggle when shown */
    }

  #contact-form-window {
    bottom: 5px !important;
    left: 5px !important;
    right: calc(-100vw - 5px) !important; /* Start completely off-screen */
    width: calc(100vw - 10px) !important;
    height: calc(100vh - 80px) !important; /* Changed from percentage */
    max-height: 450px !important;
    min-height: 350px !important; /* Ensure minimum height */
    z-index: 2147483647; /* Highest z-index on small screens */
    transition: right 0.3s ease-in-out, transform 0.3s ease-in-out; /* Smooth slide */
  }

    #contact-form-window.show {
      display: flex !important; /* Use flex when shown */
      flex-direction: column;
      right: 5px !important; /* Slide into view */
      transform: translateX(0); /* Ensure it's in the correct position */
      z-index: 2147483647; /* Above everything when shown */
    }

  /* Adjust padding for very small screens */
  #chatbot-contact-form {
    padding-bottom: 150px; /* More space for sticky footer on small screens */
  }
}

/* iOS-specific fixes for viewport handling */
@supports (-webkit-touch-callout: none) {
  /* iOS only styles */
  #contact-form-window {
    /* Use dynamic viewport height with safe area adjustments */
    height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 100px) !important;
    max-height: calc(100vh - 100px) !important;
  }

    #contact-form-window.show {
      display: flex !important;
      flex-direction: column;
    }

  .contact-form-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
  }

  #chatbot-contact-form {
    flex: 1;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 160px; /* Extra padding for iOS */
  }
  /* Account for iOS safe areas in sticky footer */
  .form-sticky-footer {
    /* Account for iOS safe areas */
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
  }
    /* Ensure form button is above iOS home indicator */
    .form-sticky-footer .form-submit-btn {
      margin-bottom: env(safe-area-inset-bottom);
    }
}

/* Ensure chatbot stays on top of all template elements */
.accessibility-img {
  z-index: 1000 !important; /* Below chatbot */
}

.footer {
  z-index: 1 !important;
}

.content {
  z-index: 1 !important;
}

/* Ensure any sticky or fixed elements stay below chatbot */
.sticky-top,
.fixed-top,
.fixed-bottom {
  z-index: 1030 !important; /* Standard Bootstrap z-index, below chatbot */
}