/* === Chatbot Container === */

.chatbot-overlay {
  width: 100%;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  box-sizing: border-box;
}

.chatbot-window {
  width: 100%;
  max-width: 600px;
  height: 800px; /* Increased from 750px to compensate for footer */
  background: #f9fafb;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: 'Inter', sans-serif;
}

/* === Feedback Icons === */

.feedback-icons {
  display: flex;
  gap: 16px;
  margin-top: 16px;
  justify-content: flex-start;
  align-items: center;
  align-self: flex-start;
}

.feedback-btn {
  background: none;
  border: none;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
}

.feedback-btn:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.feedback-btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.feedback-btn.disabled:hover {
  background-color: transparent;
}

/* === Feedback Popup === */

.feedback-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.feedback-popup.hidden {
  display: none;
}

.feedback-popup-content {
  background: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  max-width: 400px;
  width: 90%;
}

.feedback-popup-content h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.feedback-popup-content textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
  margin-bottom: 16px;
  box-sizing: border-box;
}

.feedback-popup-content textarea:focus {
  outline: none;
  border-color: #007bff;
}

.feedback-submit-btn {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.feedback-submit-btn:hover {
  background-color: #0056b3;
}

/* === Feedback Button Icons === */

.feedback-btn img {
  width: 20px !important;
  height: 20px !important;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.feedback-btn:hover img {
  opacity: 1;
}

.feedback-btn.disabled img {
  opacity: 0.4;
}

/* === Tooltip === */

.tooltip {
  position: fixed;
  background-color: #333;
  color: white;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  z-index: 10001;
  pointer-events: none;
  white-space: nowrap;
}

.tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: #333;
}

/* === Mobile Responsive Design === */
@media (max-width: 768px) {
  /* Completely override the outer Tailwind container on mobile */
  .bg-lava {
    padding: 0 !important;
    background: none !important;
    height: auto !important;
    width: auto !important;
    display: block !important;
    align-items: unset !important;
    justify-content: unset !important;
  }
  
  /* Target specific Tailwind classes that might be interfering */
  .bg-lava.bg-cover.bg-center.h-screen.w-screen.flex.items-center.justify-center.p-4 {
    padding: 0 !important;
    background: none !important;
    height: auto !important;
    width: auto !important;
    display: block !important;
    align-items: unset !important;
    justify-content: unset !important;
  }
  
  .chatbot-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.7) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 1000 !important;
    font-family: 'Inter', sans-serif !important;
    /* Crucial lines for spacing and safety - like Birta */
    padding: 5vh 20px !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
  }
  
  /* Mobile override */
  .chatbot-overlay {
    padding: 0 !important;
    overflow: hidden !important;
  }
  
  .chatbot-window {
    width: 100% !important;
    max-width: none !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important; /* Prevent content from going outside frame */
  }
  
  /* Adjust top bar for mobile */
  .top-bar {
    padding: 16px 12px !important; /* Slightly reduced padding */
  }
  
  /* Adjust chat area padding for mobile */
  .chat {
    padding: 16px 12px !important; /* Reduced padding for mobile */
    flex: 1 !important; /* Allow chat area to grow and fill available space */
    max-height: calc(100vh - 200px) !important; /* Constrain height to stay within frame */
    overflow-y: auto !important; /* Allow scrolling within the constrained area */
  }
  
  /* Ensure bottom bar doesn't get cut off and is above browser chrome */
  .bottom-bar {
    padding: 12px !important;
    position: relative !important;
    z-index: 1001 !important; /* Higher than chat window */
    flex-shrink: 0 !important; /* Prevent bottom bar from shrinking */
  }
}





/* === Top Bar === */

.top-bar {
  background-color: #f3f2f1;
  padding: 16px 20px 16px 20px; /* Add left/right padding back */
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.top-bar-content {
  display: flex;
  align-items: center; /* Center items vertically in the header */
  gap: 16px;
  height: 100%; /* Take full height of top bar */
  padding: 0 !important; /* Remove all padding */
  margin: 0 !important; /* Remove all margin */
}

.avatar,
.avatar-bot,
.avatar-user {
  background-color: #fff;
  min-width: 42px;
  min-height: 42px;
  padding: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 15px 30px rgba(17, 17, 17, 0.15);
  border-radius: 50%;
}

.chatbot-icon {
  font-size: 24.5px;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Top header avatar - remove background, shadow, and size appropriately */
.top-bar .avatar {
  background-color: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: 100px !important; /* User requested 100px */
  height: auto !important; /* Remove forced height */
  min-width: auto !important;
  min-height: auto !important;
  display: flex !important;
  align-items: center !important; /* Center vertically */
  margin-left: 8px !important; /* Reduced left margin since top-bar now has padding */
  margin-bottom: -16px !important; /* Push down to counteract top-bar top padding */
}

/* Top header icon - size appropriately and align to gray line */
.top-bar .avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: bottom !important; /* Align to bottom */
  border-radius: 0 !important;
}

.chatbot-label {
  font-family: Inter, sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #000;
  letter-spacing: -0.5px;
}

.minimize-icon {
  width: 42px;
  height: 42px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-radius: 50%;
  transition: background-color 0.2s ease;
}

.minimize-icon:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

/* === Chat Window === */

.chat {
  flex-grow: 1;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow-y: auto;
  background-color: #f3f2f1;
}

.chatbot-response,
.user-response {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

/* Ensure chat bubble avatars stay perfectly round */
.chatbot-response .avatar-bot,
.user-response .avatar-user {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important; /* Prevent flexbox from shrinking the avatar */
  background-color: #fff !important; /* Keep white circular background */
  padding: 0 !important; /* Remove padding so SVG fills completely */
}

/* Make chat bubble icons fill the circular space completely */
.chatbot-response .avatar-bot img,
.user-response .avatar-user img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
}

.chatbot-response {
  justify-content: flex-start;
}

.chatbot-message-container {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.user-response {
  justify-content: flex-end;
}

.chatbot-message,
.user-message {
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12); /* Middle-ground shadow for all chat bubbles */
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 500px; /* Increased from 364px to take advantage of wider chat window */
  word-wrap: break-word;
}

/* Chatbot Message Styling */
.chatbot-message {
  background: #F3E1C2; /* Changed back to the softer, original color */
  padding: 16px;
  border-radius: 12px;
  margin-left: 8px;
  max-width: 500px;
  word-wrap: break-word;
  display: flex;
  flex-direction: column;
  /* Shadow inherited from .chatbot-message, .user-message above */
}

/* Increase spacing between bullet points and list items */
.chatbot-message ul,
.chatbot-message ol {
  margin: 12px 0;
  padding-left: 20px; /* Keep indentation for proper list formatting */
  list-style: disc; /* Show bullet points for lists */
}

.chatbot-message li {
  margin-bottom: 10px; /* Increased spacing between list items to 10px */
  line-height: 1.5;
}

.chatbot-message li:last-child {
  margin-bottom: 0; /* No margin on last item */
}

/* Remove indentation for bot's structured responses that aren't actual lists */
.chatbot-message p strong {
  display: inline; /* Keep headers inline with content */
  margin-right: 4px; /* Small space between header and content */
}

/* Remove bullets from structured responses (when li contains bold headers) */
.chatbot-message li strong {
  display: inline;
  margin-right: 4px;
}

/* Remove bullets and indentation from structured response list items */
.chatbot-message ul:not(.list-with-bullets) li {
  list-style: none;
  padding-left: 0 !important; /* Force remove indentation */
  margin-left: 0 !important; /* Force remove any left margin */
}

/* Also target the ul container for structured responses */
.chatbot-message ul:not(.list-with-bullets) {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* Keep bullets only for actual lists (when ul is used for enumeration) */
.chatbot-message ul.list-with-bullets li {
  list-style: disc;
  padding-left: 8px; /* Reduced from 20px to bring text closer to bullets */
}

/* Add spacing between paragraphs and sections */
.chatbot-message p {
  margin-bottom: 8px; /* Reduced from 12px */
}

.chatbot-message p:last-child {
  margin-bottom: 0;
}

/* Make bold headers inline with content instead of block elements */
.chatbot-message strong {
  display: inline; /* Changed from block to inline */
  margin-bottom: 0; /* Remove bottom margin */
  margin-right: 4px; /* Small space between header and content */
}

.user-message {
  background-color: #ffffff;
  justify-content: flex-end;
}

/* === Text Styling === */
.response-text {
  font-size: 16px;
  color: #393b3a;
  line-height: 1.5;
  letter-spacing: 0.5px;
  margin: 0;
}

.response-text strong {
  font-weight: 600;
}

.response-text em {
  font-style: italic;
}

.response-text ul, .response-text ol {
  margin: 8px 0;
  padding-left: 20px;
  list-style: disc; /* Show bullet points for lists */
}

.response-text li {
  margin: 10px 0;
  padding-left: 0;
  list-style: inherit; /* Inherit the disc style from parent ul */
}

.response-text p {
  margin: 8px 0;
}

.response-text p:first-child {
  margin-top: 0;
}

.response-text p:last-child {
  margin-bottom: 0;
}

.user-text {
  font-size: 16px;
  color: #393b3a;
  line-height: 1.5;
  letter-spacing: 0.5px;
  margin: 0;
}

/* === Bottom Bar === */

.bottom-bar {
  background-color: #f3f2f1;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.bottom-actions {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
}

.chat-input {
  background-color: #ffffff;
  min-height: 64px;
  flex-grow: 1;
  border: none;
  border-radius: 16px;
  box-shadow: 0 9px 15px rgba(0, 0, 0, 0.06);
  font-family: Inter, sans-serif;
  font-size: 16px;
  resize: none;
  outline: none;
  transition: all 0.2s ease;
}

.chat-input:focus,
.chat-input:active {
  box-shadow: 0 9px 15px rgba(0, 0, 0, 0.1);
}

/* === Submit Button === */

.submit-button {
  background-color: #f5c773;
  height: 64px;
  width: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 15px 30px rgba(17, 17, 17, 0.15);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.submit-button:hover {
  background-color: #f0c060;
  transform: translateY(-1px);
}

.submit-button:disabled {
  background-color: #e0e0e0;
  cursor: not-allowed;
  transform: none;
}

.submit-button:disabled img {
  opacity: 0.5;
}

/* === Scrollbar Styling === */

.chat::-webkit-scrollbar {
  width: 5px;
}

.chat::-webkit-scrollbar-thumb {
  background-color: #f5c773;
  border-radius: 10px;
}

.chat::-webkit-scrollbar-track {
  background-color: transparent;
}

.chat {
  scrollbar-width: thin;
  scrollbar-color: #f5c773 transparent;
}

/* Mode Toggle Buttons */
.mode-toggles {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 16px; /* Reduced from 8px to 4px */
    margin-top: 4px; /* Reduced from 8px to 4px */
}

.mode-label {
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
    margin-right: 8px;
}

.mode-btn {
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mode-btn:hover {
    background: #e5e7eb;
    border-color: #9ca3af;
}

.mode-btn.active {
    background: #e5e7eb;
    border: none;
    color: #374151;
}

/* === Responsive === */

@media screen and (max-width: 480px) {
  .chatbot-window {
    width: 100%;
    height: 100vh;
    border-radius: 0;
  }
  
  .response-text,
  .user-text {
    font-size: 14px;
  }

  .chat {
    padding: 16px 12px;
  }
  
  .top-bar {
    padding: 16px 12px;
  }
  
  .bottom-bar {
    padding: 12px;
  }
}