/* Force our styles to take precedence over Tailwind */
body {
  background: linear-gradient(135deg, #143345 0%, #2dbec6 25%, #143345 50%, #2dbec6 75%, #143345 100%) !important;
  background-size: 400% 400% !important;
  animation: gradientShift 15s ease infinite !important;
  min-height: 100vh !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

/* Allow normal page scroll (reverted) */
html, body {
  height: auto !important;
  overflow: auto !important;
}

/* Debug banners removed for clean interface */

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.dark-mode {
  background: linear-gradient(135deg, #143345 0%, #2dbec6 25%, #143345 50%, #2dbec6 75%, #143345 100%);
  background-size: 400% 400%;
  animation: gradientShift 20s ease infinite;
  color: #e2e8f0;
}

body.dark-mode {
  background: linear-gradient(135deg, #143345 0%, #2dbec6 25%, #143345 50%, #2dbec6 75%, #143345 100%) !important;
  background-size: 400% 400% !important;
  animation: gradientShift 20s ease infinite !important;
  color: #e2e8f0 !important;
}

body.dark-mode .fixed.bottom-0.left-0.right-0 {
  background: #23272f !important;
}

body.dark-mode .bg-white, body.dark-mode .bg-white\/90, body.dark-mode .bg-white\/80 {
  background: #23272f !important;
  color: #e0e0e0;
}

body.dark-mode .rounded-2xl {
  background: #23272f !important;
  color: #e0e0e0;
}

body.dark-mode #chat-container {
  background: transparent;
}

body.dark-mode .shadow-lg, body.dark-mode .shadow-xl {
  box-shadow: 0 2px 16px 0 rgba(0,0,0,0.7) !important;
}

/* Keep the search bar itself light */
body.dark-mode .flex.items-center.bg-white.rounded-2xl {
  background: rgba(30,32,38,0.85) !important;
  color: #e0e0e0;
}

#chat-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 30px 20px 10px 20px;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1003;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  border-radius: 25px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
  margin-top: 80px;
  margin-bottom: 20px;
  overflow-y: auto;
  max-height: 65vh; /* reduced height */
  overflow-x: hidden;
}

/* Smaller on mobile */
@media (max-width: 768px) {
  #chat-container { max-height: 30vh !important; }
}
@media (max-width: 480px) {
  #chat-container { max-height: 68vh !important; }
}

/* Remove chat-active growth (reverted) */
#chat-container.chat-active { max-height: 70vh; }

/* Pin input bar at bottom to prevent overlap */
.fixed.bottom-0.left-0.right-0 {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
}

@supports (padding: max(0px)) {
  .fixed.bottom-0.left-0.right-0 { bottom: env(safe-area-inset-bottom) !important; }
}

/* Ensure padding for input bar on small screens */
@media (max-width: 768px) {
  #chat-container { padding-bottom: 200px !important; }
}
@media (max-width: 480px) {
  #chat-container { padding-bottom: 220px !important; }
}


/* Enhanced search bar styling */
.fixed.bottom-0.left-0.right-0 {
  background: transparent !important;
  box-shadow: none !important;
  padding-bottom: 0 !important;
  margin-bottom: 40px !important;
  min-height: 100px;
  z-index: 1001;
  bottom: -100px !important;
}

.container.mx-4.px-4.py-4.max-w-4xl {
  padding-bottom: 0 !important;
  margin-bottom: 70px !important;
  min-height: 100px;
}

.flex.items-center.bg-white.rounded-2xl {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(20px);
  padding: 16px !important;
  margin-bottom: 25px !important;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.05);
  border-radius: 30px !important;
  transition: all 0.3s ease;
  margin: 0 20px 25px 20px !important;
  z-index: 1001 !important;
}

.flex.items-center.bg-white.rounded-2xl:hover {
  transform: translateY(-2px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15), 0 12px 24px rgba(0, 0, 0, 0.1);
}

body.dark-mode .flex.items-center.bg-white.rounded-2xl {
  background: rgba(15, 23, 42, 0.95) !important;
  border: 1px solid rgba(148, 163, 184, 0.2);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 8px 16px rgba(0, 0, 0, 0.2);
}

body.dark-mode .flex.items-center.bg-white.rounded-2xl {
  background: rgba(30,32,38,0.85) !important;
  color: #e0e0e0;
}

#chat-container {
  display: flex;
  flex-direction: column;
}

.chat-message {
  display: flex;
  margin-bottom: 16px;
  position: relative;
  z-index: 1004;
  animation: messageSlideIn 0.3s ease-out;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.chat-message.user-message {
  justify-content: flex-end;
  margin-left: auto;
}

.chat-message.bot-message {
  justify-content: flex-start;
  margin-right: auto;
}

/* Ensure last message has extra space above search bar */
.chat-message:last-child {
  margin-bottom: 20px !important;
}

/* Fix any blur issues */
.flex.justify-center.mb-8.animate-fade-in {
  backdrop-filter: none;
  filter: none;
}

/* Enhanced welcome message styling */
.bg-white\/80.rounded-2xl {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.3s ease !important;
  z-index: 1004 !important;
}

.bg-white\/80.rounded-2xl:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15) !important;
}

body.dark-mode .bg-white\/80.rounded-2xl {
  background: rgba(15, 23, 42, 0.95) !important;
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;
}

/* Enhanced logo styling */
.w-16.h-16.bg-gradient-to-r.from-blue-500.to-purple-600 {
  background: linear-gradient(135deg, #143345 0%, #2dbec6 100%) !important;
  box-shadow: 0 8px 25px rgba(20, 51, 69, 0.4) !important;
  transition: all 0.3s ease !important;
}

.w-16.h-16.bg-gradient-to-r.from-blue-500.to-purple-600:hover {
  transform: scale(1.1) rotate(5deg) !important;
  box-shadow: 0 12px 35px rgba(20, 51, 69, 0.6) !important;
}

/* Enhanced text styling */
.gradient-text {
  background: linear-gradient(135deg, #143345 0%, #2dbec6 50%, #143345 100%) !important;
  background-size: 200% 200% !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: gradientShift 3s ease infinite !important;
  font-weight: 700 !important;
}

/* Typing indicator styling */
.typing-indicator {
  opacity: 0.9;
}

.typing-bubble {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
  border: 1px solid rgba(148, 163, 184, 0.3) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
  min-width: 120px;
  animation: typingPulse 2s ease-in-out infinite;
}

@keyframes typingPulse {
  0%, 100% {
    opacity: 0.9;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.02);
  }
}

/* Additional spacing to prevent overlap */
.chat-message:last-child {
  margin-bottom: 10px !important;
}



/* Ensure search bar stays at bottom without overlap */
.fixed.bottom-0.left-0.right-0 {
  position: fixed !important;
  bottom: 50px !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1002 !important;
}

/* Responsive spacing for different screen sizes */
@media (max-width: 768px) {
  #chat-container {
    padding-bottom: 160px !important;
    margin-bottom: 30px !important;
    margin-top: 90px !important;
  }
  
  .fixed.bottom-0.left-0.right-0 {
    bottom: -60px !important;
    padding-bottom: 20px !important;
  }
  
  .container.mx-auto.px-4.py-4.max-w-4xl {
    margin-bottom: 25px !important;
  }
}

@media (max-width: 480px) {
  #chat-container {
    padding-bottom: 180px !important;
    margin-bottom: 20px !important;
    margin-top: 100px !important;
  }
  
  .fixed.bottom-0.left-0.right-0 {
    bottom: -40px !important;
    padding-bottom: 25px !important;
  }
  
  .container.mx-auto.px-4.py-4.max-w-4xl {
    margin-bottom: 20px !important;
  }
}

/* Additional mobile device breakpoints */
@media (max-width: 375px) {
  #chat-container {
    padding-bottom: 200px !important;
    margin-top: 100px !important;
  }
  
  .fixed.bottom-0.left-0.right-0 {
    bottom: -20px !important;
    padding-bottom: 30px !important;
  }
  
  .flex.items-center.bg-white.rounded-2xl {
    width: 99.5% !important;
    max-width: 99.5% !important;
    margin: 0 auto !important;
    padding: 8px !important;
    gap: 6px !important;
    min-width: 360px !important;
  }
  
  /* Hide file upload popup on small mobile devices */
  #upload-popup {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
  }
  
  /* White arrow instead of "Send" text on small mobile devices */
  #send-btn::before {
    content: "➤" !important;
    font-size: 16px !important;
    font-weight: bold !important;
    line-height: 1 !important;
    color: white !important;
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.5) !important;
  }
  
  /* Completely hide the original "Send" text on small mobile devices */
  #send-btn {
    font-size: 0 !important;
    color: transparent !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
  }
  
  /* Ensure no text is visible */
  #send-btn span,
  #send-btn * {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
  
  #send-btn {
    min-width: 55px !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #1d4ed8 0%, #6d28d9 100%) !important;
    box-shadow: 0 2px 10px rgba(59, 130, 246, 0.2) !important;
    font-weight: 600 !important;
  }
}

@media (max-width: 320px) {
  #chat-container {
    padding-bottom: 220px !important;
    margin-top: 120px !important;
  }
  
  .fixed.bottom-0.left-0.right-0 {
    bottom: -10px !important;
    padding-bottom: 35px !important;
  }
  
  .flex.items-center.bg-white.rounded-2xl {
    padding: 10px !important;
    gap: 6px !important;
    width: 99.8% !important;
    max-width: 99.8% !important;
    margin: 0 auto !important;
    min-width: 340px !important;
  }
  
  /* Hide file upload popup on very small mobile devices */
  #upload-popup {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
  }
  
  /* White arrow instead of "Send" text on very small mobile devices */
  #send-btn::before {
    content: "➤" !important;
    font-size: 15px !important;
    font-weight: bold !important;
    line-height: 1 !important;
    color: white !important;
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.5) !important;
  }
  
  /* Completely hide the original "Send" text on very small mobile devices */
  #send-btn {
    font-size: 0 !important;
    color: transparent !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
  }
  
  /* Ensure no text is visible */
  #send-btn span,
  #send-btn * {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
  
  #send-btn {
    min-width: 50px !important;
    padding: 9px 12px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
    background: linear-gradient(135deg, #1e40af 0%, #5b21b6 100%) !important;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15) !important;
    font-weight: 600 !important;
  }
  
  #mic-btn, #send-btn, #plus-btn {
    min-width: 40px !important;
    min-height: 40px !important;
    font-size: 14px !important;
  }
  
  #user-input {
    font-size: 15px !important;
    padding: 10px 14px !important;
  }
}

/* Mobile-only button sizing adjustments */
@media (max-width: 480px) {
  #mic-btn, #send-btn, #plus-btn {
    min-width: 44px !important;
    min-height: 44px !important;
    font-size: 16px !important;
  }
  
  .flex.items-center.bg-white.rounded-2xl {
    gap: 8px !important;
    padding: 10px !important;
    width: 98% !important;
    max-width: 98% !important;
    margin: 0 auto !important;
  }
  
  #send-btn {
    min-width: 55px !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    border-radius: 12px !important;
    box-shadow: 0 3px 12px rgba(59, 130, 246, 0.25) !important;
    background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%) !important;
    font-weight: 700 !important;
  }
  
  #user-input {
    font-size: 16px !important;
    padding: 10px 14px !important;
  }
}

/* Safe area support for modern mobile devices */
@supports (padding: max(0px)) {
  .fixed.bottom-0.left-0.right-0 {
    bottom: max(-100px, env(safe-area-inset-bottom) - 80px) !important;
    padding-bottom: max(20px, env(safe-area-inset-bottom) + 10px) !important;
  }
}

/* Additional positioning safeguards */
#chat-container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Mobile-only input field styling */
@media (max-width: 768px) {
  #user-input {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    flex: 1 !important;
    min-width: 0 !important;
    font-size: 16px !important;
    color: #1f2937 !important;
    padding: 12px 16px !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
  }
  
  #user-input:focus {
    background: rgba(59, 130, 246, 0.05) !important;
    box-shadow: inset 0 0 0 2px rgba(59, 130, 246, 0.2) !important;
  }
  
  #user-input::placeholder {
    color: #9ca3af !important;
    font-style: italic !important;
  }
  
  /* Ensure buttons are always visible */
  #mic-btn, #send-btn, #plus-btn {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    flex-shrink: 0 !important;
  }
  
  /* Force button visibility */
  .flex.items-center.bg-white.rounded-2xl > * {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  /* Mobile-specific input container width */
.flex.items-center.bg-white.rounded-2xl {
  min-width: 320px !important;
  box-sizing: border-box !important;
}

  /* Force send button to be visible on all mobile devices */
@media (max-width: 768px) {
  #send-btn {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    z-index: 9999 !important;
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%) !important;
    color: white !important;
    border: none !important;
    cursor: pointer !important;
    min-width: 60px !important;
    min-height: 44px !important;
    padding: 12px 16px !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3) !important;
  }
  
  /* Replace "Send" text with white arrow on mobile */
  #send-btn::before {
    content: "➤" !important;
    font-size: 20px !important;
    font-weight: bold !important;
    line-height: 1 !important;
    color: white !important;
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.5) !important;
  }
  
  /* Completely hide the original "Send" text on mobile */
  #send-btn {
    font-size: 0 !important;
    color: transparent !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
  }
  
  /* Ensure no text is visible */
  #send-btn span,
  #send-btn * {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
  
  /* Ensure the search bar layout is correct */
  .flex.items-center.bg-white.rounded-2xl {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }
  
  /* Ensure arrow is properly visible and positioned */
  #send-btn::before {
    display: block !important;
    position: relative !important;
    z-index: 1006 !important;
    text-align: center !important;
    width: 100% !important;
    height: 100% !important;
    line-height: 44px !important;
  }
  
  /* Hide file upload popup on mobile devices */
  #upload-popup {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}
  
  /* Enhanced mobile send button */
  #send-btn {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transform-origin: center !important;
    cursor: pointer !important;
  }
  
  #send-btn:active {
    transform: scale(0.95) !important;
    box-shadow: 0 1px 5px rgba(59, 130, 246, 0.2) !important;
  }
  
  #send-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4) !important;
  }
}

/* Mobile-specific input bar styling */
@media (max-width: 480px) {
  /* Decrease button sizes for mobile phones */
  #mic-btn, #send-btn, #plus-btn {
    min-width: 32px !important;
    min-height: 32px !important;
  }
  
  /* Smaller send button for mobile phones */
  #send-btn {
    min-width: 45px !important;
    padding: 6px 10px !important;
    border-radius: 8px !important;
  }
  
  /* Ensure arrow is visible on mobile phones */
  #send-btn::before {
    content: "➤" !important;
    font-size: 14px !important;
    color: white !important;
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.5) !important;
  }
  
  /* Increase search bar spacing and input field size */
  .flex.items-center.bg-white.rounded-2xl {
    padding: 16px !important;
    gap: 12px !important;
    min-height: 60px !important;
  }
  
  /* Give more space for typing */
  #user-input {
    font-size: 16px !important;
    padding: 12px 16px !important;
    flex: 1 !important;
    min-width: 250px !important;
    margin: 0 12px !important;
    height: 40px !important;
    border-radius: 8px !important;
  }
  
  /* Ensure placeholder text is visible */
  #user-input::placeholder {
    color: #6b7280 !important;
    font-size: 16px !important;
    font-style: italic !important;
    opacity: 1 !important;
  }
  .flex.items-center.bg-white.rounded-2xl {
    padding: 16px !important;
    gap: 12px !important;
    width: 99% !important;
    max-width: 99% !important;
    margin: 0 auto !important;
    min-width: 380px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 60px !important;
  }
  
  /* Hide file upload popup on mobile phones */
  #upload-popup {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
  }
  
  /* White arrow instead of "Send" text on mobile phones */
  #send-btn::before {
    content: "➤" !important;
    font-size: 18px !important;
    font-weight: bold !important;
    line-height: 1 !important;
    color: white !important;
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.5) !important;
  }
  
  /* Completely hide the original "Send" text on mobile phones */
  #send-btn {
    font-size: 0 !important;
    color: transparent !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
  }
  
  /* Ensure no text is visible */
  #send-btn span,
  #send-btn * {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
  
  #mic-btn, #send-btn, #plus-btn {
    min-width: 36px !important;
    min-height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  #send-btn {
    min-width: 65px !important;
    padding: 12px 18px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3) !important;
    color: white !important;
    border: none !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 1005 !important;
  }
  
  #user-input {
    font-size: 16px !important;
    padding: 12px 16px !important;
    flex: 1 !important;
    min-width: 200px !important;
    margin: 0 8px !important;
  }
  
  #plus-btn {
    min-width: 44px !important;
    min-height: 44px !important;
  }
  
  /* Force send button visibility */
  #send-btn {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: static !important;
    transform: none !important;
    width: auto !important;
    height: auto !important;
    min-width: 65px !important;
    min-height: 44px !important;
    background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%) !important;
    color: white !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    padding: 12px 18px !important;
    margin: 0 !important;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3) !important;
    z-index: 9999 !important;
  }
  
  /* Ensure input wrapper doesn't hide send button */
  #input-wrapper {
    flex: 1 !important;
    min-width: 0 !important;
    max-width: calc(100% - 150px) !important; /* was 200px, give more space to input */
  }
}

/* Mobile-only button adjustments - keep desktop unchanged */
@media (max-width: 768px) {
  .flex.items-center.bg-white.rounded-2xl {
    position: relative !important;
    overflow: visible !important;
    padding: 12px !important;
    gap: 8px !important;
    width: 98% !important;
    max-width: 98% !important;
    margin: 0 auto !important;
    min-width: 350px !important;
  }
  
  #mic-btn, #send-btn, #plus-btn {
    position: relative !important;
    z-index: 1002 !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }
  
  #mic-btn {
    background: rgba(34, 197, 94, 0.1) !important;
    color: #059669 !important;
    border: 1px solid rgba(34, 197, 94, 0.2) !important;
    font-size: 16px !important;
  }
  
  #mic-btn:hover {
    background: rgba(34, 197, 94, 0.2) !important;
    transform: scale(1.05) !important;
  }
  
  #send-btn {
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%) !important;
    color: white !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    font-size: 14px !important;
    padding: 12px 16px !important;
    min-width: 60px !important;
    border-radius: 15px !important;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3) !important;
    position: relative !important;
    z-index: 1003 !important;
  }
  
  #send-btn:hover {
    background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%) !important;
    transform: scale(1.05) !important;
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4) !important;
  }
  
  #plus-btn {
    background: rgba(59, 130, 246, 0.1) !important;
    color: #3b82f6 !important;
    border: 1px solid rgba(59, 130, 246, 0.2) !important;
    font-size: 18px !important;
  }
  
  #plus-btn:hover {
    background: rgba(59, 130, 246, 0.2) !important;
    transform: scale(1.05) !important;
  }
}

.chat-message {
  flex-shrink: 0;
}

/* Ensure messages don't overlap */
.user-message .message-bubble,
.bot-message .message-bubble {
  flex-shrink: 0;
}

.user-message .message-bubble {
  background: linear-gradient(135deg, #143345 0%, #2dbec6 100%);
  color: white;
  padding: 16px 20px;
  border-radius: 25px 25px 8px 25px;
  max-width: 70%;
  box-shadow: 0 8px 25px rgba(20, 51, 69, 0.4), 0 4px 10px rgba(0, 0, 0, 0.1);
  position: relative;
  word-wrap: break-word;
  margin-left: auto;
  margin-right: 0;
  font-weight: 500;
  letter-spacing: 0.3px;
  border: none;
  backdrop-filter: blur(10px);
  z-index: 1004;
  overflow: hidden;
}

.user-message .message-bubble::before {
  content: '';
  position: absolute;
  right: -10px;
  top: 0;
  width: 0;
  height: 0;
  border-left: 10px solid #143345;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  filter: drop-shadow(2px 0 4px rgba(20, 51, 69, 0.3));
}

.bot-message .message-bubble {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  color: #1f2937;
  padding: 16px 20px;
  border-radius: 25px 25px 25px 8px;
  max-width: 70%;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0, 0, 0, 0.05);
  position: relative;
  word-wrap: break-word;
  border: none;
  margin-left: 0;
  margin-right: auto;
  font-weight: 400;
  letter-spacing: 0.2px;
  backdrop-filter: blur(10px);
  z-index: 1004;
  overflow: hidden;
}

.bot-message .message-bubble::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 0;
  width: 0;
  height: 0;
  border-right: 10px solid #ffffff;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  filter: drop-shadow(-2px 0 4px rgba(0, 0, 0, 0.1));
}

.bot-message .message-bubble::after {
  content: '';
  position: absolute;
  left: -11px;
  top: 0;
  width: 0;
  height: 0;
  border-right: 11px solid #e5e7eb;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  z-index: -1;
}

@keyframes messageSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Message bubble content styling */
.message-bubble p {
  margin: 0;
  line-height: 1.5;
  word-wrap: break-word;
}

.message-bubble p:not(:last-child) {
  margin-bottom: 8px;
}

/* Ensure proper text wrapping in bubbles */
.message-bubble {
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
  z-index: 1005;
}

/* Improve spacing for different content types */
.message-bubble ul, .message-bubble ol {
  margin: 8px 0;
  padding-left: 20px;
}

.message-bubble li {
  margin-bottom: 4px;
}

.message-bubble code {
  background: rgba(0, 0, 0, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 0.9em;
}

body.dark-mode .message-bubble code {
  background: rgba(255, 255, 255, 0.1);
}

/* Hover effects for message bubbles */
.user-message .message-bubble:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 35px rgba(102, 126, 234, 0.5), 0 8px 20px rgba(0, 0, 0, 0.15);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.bot-message .message-bubble:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15), 0 8px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Enhanced message animations */
.chat-message {
  animation: messageSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Auto-scroll indicator */
.chat-message.new-message {
  animation: messageSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1), autoScrollIndicator 2s ease-out;
}

@keyframes messageSlideIn {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes autoScrollIndicator {
  0% {
    box-shadow: 0 0 0 0 rgba(20, 51, 69, 0.7);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(20, 51, 69, 0.4);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(20, 51, 69, 0);
  }
}

/* Visual indicators removed for clean interface */

/* Media query removed - no longer needed */

/* Dark mode support for message bubbles */
body.dark-mode .bot-message .message-bubble {
  background: linear-gradient(135deg, #374151 0%, #4b5563 100%);
  color: #e5e7eb;
  border: none;
}

body.dark-mode .bot-message .message-bubble::before {
  border-right-color: #374151;
}

body.dark-mode .bot-message .message-bubble::after {
  border-right-color: #6b7280;
}

/* Hide scrollbar but keep functionality */
#chat-container::-webkit-scrollbar {
  width: 0;
  display: none;
}

#chat-container::-webkit-scrollbar-track {
  display: none;
}

#chat-container::-webkit-scrollbar-thumb {
  display: none;
}

#chat-container::-webkit-scrollbar-thumb:hover {
  display: none;
}

body.dark-mode #chat-container::-webkit-scrollbar-track {
  display: none;
}

/* Hide scrollbar for Firefox */
#chat-container {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* Enhanced file chips styling */
#file-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.file-chip {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
  transition: all 0.3s ease;
}

.file-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.file-chip .remove-chip {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 10px;
  transition: all 0.2s ease;
}

.file-chip .remove-chip:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.dot {
  display: inline-block;
  font-size: 2rem;
  animation: bounce 1s ease infinite;
}

@keyframes bounce {
  0%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-10px); }
}

/* Enhanced input field styling */
#user-input {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  font-size: 16px !important;
  color: #1f2937 !important;
  padding: 12px 16px !important;
  border-radius: 20px !important;
  transition: all 0.3s ease !important;
  min-height: 48px !important;
}

#user-input::placeholder {
  color: #9ca3af !important;
  font-weight: 400 !important;
  opacity: 0.8 !important;
}

#user-input::placeholder {
  color: #9ca3af !important;
  font-weight: 400 !important;
}

#user-input:focus {
  background: rgba(59, 130, 246, 0.05) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

body.dark-mode #user-input {
  color: #e5e7eb !important;
}

body.dark-mode #user-input::placeholder {
  color: #6b7280 !important;
}

body.dark-mode #user-input:focus {
  background: rgba(59, 130, 246, 0.1) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
}

/* Enhanced button styling */
#send-btn {
  background: linear-gradient(135deg, #143345 0%, #2dbec6 100%) !important;
  border: none !important;
  color: white !important;
  padding: 12px 24px !important;
  border-radius: 25px !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 15px rgba(20, 51, 69, 0.4) !important;
  min-height: 48px !important;
}

#send-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(20, 51, 69, 0.6) !important;
  background: linear-gradient(135deg, #0f2a35 0%, #25a8b0 100%) !important;
}

#plus-btn, #mic-btn {
  background: rgba(59, 130, 246, 0.1) !important;
  border: 1px solid rgba(59, 130, 246, 0.2) !important;
  color: #3b82f6 !important;
  padding: 12px !important;
  border-radius: 20px !important;
  transition: all 0.3s ease !important;
  min-height: 48px !important;
  min-width: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#plus-btn:hover, #mic-btn:hover {
  background: rgba(59, 130, 246, 0.2) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}

/* Desktop plus button popup styling */
.plus-popup {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  background: white !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
  border: 1px solid rgba(59, 130, 246, 0.1) !important;
  padding: 16px !important;
  min-width: 220px !important;
  z-index: 1000 !important;
  margin-top: 8px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-10px) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.plus-popup.show {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

.plus-popup::before {
  content: "" !important;
  position: absolute !important;
  top: -6px !important;
  left: 20px !important;
  width: 12px !important;
  height: 12px !important;
  background: white !important;
  border-left: 1px solid rgba(59, 130, 246, 0.1) !important;
  border-top: 1px solid rgba(59, 130, 246, 0.1) !important;
  transform: rotate(45deg) !important;
}

.plus-popup-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  color: #374151 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

.plus-popup-item:hover {
  background: rgba(59, 130, 246, 0.05) !important;
  color: #1f2937 !important;
}

.plus-popup-item i {
  width: 20px !important;
  text-align: center !important;
  color: #3b82f6 !important;
}

body.dark-mode #plus-btn, body.dark-mode #mic-btn {
  background: rgba(59, 130, 246, 0.15) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
}

#mic-btn .fa-microphone {
  color: blue;
  transition: color 0.2s;
}
/* Mic button color states */
#mic-btn.recording .fa-microphone {
  color: #ef4444 !important; /* Red when recording */
}

#mic-btn:not(.recording) .fa-microphone {
  color: #3b82f6 !important; /* Blue when stopped */
}

#mic-btn:hover .fa-microphone {
  color: #1d4ed8 !important; /* Darker blue on hover */
}

/* Safe area support for mobile devices */
.safe-area-inset-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}

/* Ensure smooth scrolling for chat container */
#chat-container {
  scroll-behavior: smooth;
  overflow-y: auto;
  scroll-padding-top: 20px;
}

/* Responsive bottom padding adjustments */
@media (max-width: 640px) {
  #chat-container {
    padding-bottom: 6rem; /* 96px for mobile */
  }
}

@media (min-width: 641px) and (max-width: 768px) {
  #chat-container {
    padding-bottom: 7rem; /* 112px for small tablets */
  }
}

@media (min-width: 769px) {
  #chat-container {
    padding-bottom: 8rem; /* 128px for larger screens */
  }
}

/* File chips within input */
#file-chips .file-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #eef2ff;
  color: #3730a3;
  border: 1px solid #c7d2fe;
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 12px;
}
#file-chips .file-chip .remove-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  color: #6b7280;
}
#file-chips .file-chip .remove-chip:hover {
  background: #e5e7eb;
  color: #111827;
}

/* Mobile-specific search bar improvements */
@media (max-width: 480px) {
  /* Enhanced mobile layout with better spacing (matching desktop) */
  .flex.items-center.bg-white.rounded-2xl {
    padding: 12px !important;
    gap: 0 !important;
    min-height: 60px !important;
    background: white !important;
    border-radius: 25px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
    border: none !important;
    backdrop-filter: none !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  
  /* Smaller buttons for mobile with theme colors */
  #mic-btn, #send-btn, #plus-btn {
    min-width: 28px !important;
    min-height: 28px !important;
    margin: 0 !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }
  
  /* Plus button - light blue background with blue outline (matching desktop) */
  #plus-btn {
    background: rgba(59, 130, 246, 0.1) !important;
    border: 1px solid rgba(59, 130, 246, 0.2) !important;
    color: #3b82f6 !important;
    box-shadow: none !important;
    margin-right: 8px !important;
    flex-shrink: 0 !important;
  }
  
  /* Microphone button positioning - now on the left */
  #mic-btn {
    margin-right: 4px !important;
  }
  
  /* Send button positioning - now on the right */
  #send-btn {
    margin-left: 0 !important;
  }
  
  /* Plus button popup styling */
  .plus-popup {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    background: white !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid rgba(59, 130, 246, 0.1) !important;
    padding: 16px !important;
    min-width: 200px !important;
    z-index: 1000 !important;
    margin-top: 8px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-10px) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
  
  .plus-popup.show {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
  }
  
  .plus-popup::before {
    content: "" !important;
    position: absolute !important;
    top: -6px !important;
    left: 20px !important;
    width: 12px !important;
    height: 12px !important;
    background: white !important;
    border-left: 1px solid rgba(59, 130, 246, 0.1) !important;
    border-top: 1px solid rgba(59, 130, 246, 0.1) !important;
    transform: rotate(45deg) !important;
  }
  
  .plus-popup-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    color: #374151 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
  }
  
  .plus-popup-item:hover {
    background: rgba(59, 130, 246, 0.05) !important;
    color: #1f2937 !important;
  }
  
  .plus-popup-item i {
    width: 20px !important;
    text-align: center !important;
    color: #3b82f6 !important;
  }
  
  #plus-btn:hover {
    background: rgba(59, 130, 246, 0.2) !important;
    transform: translateY(-1px) !important;
  }
  
  /* Microphone button - light blue background with blue outline (matching desktop) */
  #mic-btn {
    background: rgba(59, 130, 246, 0.1) !important;
    border: 1px solid rgba(59, 130, 246, 0.2) !important;
    color: #3b82f6 !important;
    box-shadow: none !important;
  }
  
  #mic-btn:hover {
    background: rgba(59, 130, 246, 0.2) !important;
    transform: translateY(-1px) !important;
  }
  
  /* Send button - teal background with send icon (matching desktop) */
  #send-btn {
    min-width: 42px !important;
    min-height: 28px !important;
    padding: 8px !important;
    border-radius: 8px !important;
    background: #0d9488 !important;
    box-shadow: 0 2px 8px rgba(13, 148, 136, 0.3) !important;
    color: white !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  #send-btn:hover {
    background: #14b8a6 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.4) !important;
  }
  
  /* Send button icon */
  #send-btn::before {
    content: "➤" !important;
    font-size: 16px !important;
    color: white !important;
    font-weight: bold !important;
    line-height: 1 !important;
    display: block !important;
    text-align: center !important;
    width: 100% !important;
    height: 100% !important;
  }
  
  /* Hide any text content in send button */
  #send-btn {
    font-size: 0 !important;
    color: transparent !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
  }
  
  /* Enhanced input field with more typing space (matching desktop) */
  #user-input {
    font-size: 16px !important;
    padding: 12px 16px !important;
    flex: 1 !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 8px !important;
    height: 40px !important;
    border-radius: 8px !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    transition: all 0.3s ease !important;
    color: #1f2937 !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  
  /* Create left section with plus button and input field */
  .flex.items-center.bg-white.rounded-2xl {
    position: relative !important;
  }
  
  /* Left section container - plus button and input field */
  .flex.items-center.bg-white.rounded-2xl > *:first-child {
    margin-right: 8px !important;
  }
  
  /* Input field positioning and sizing */
  #user-input {
    flex: 1 !important;
    min-width: 0 !important;
    max-width: calc(100% - 200px) !important;
  }
  
  /* Right side container for mic and send buttons on mobile */
  .mobile-right-buttons {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
  }
  
  /* Ensure buttons are properly spaced on mobile */
  .mobile-right-buttons #mic-btn,
  .mobile-right-buttons #send-btn {
    margin: 0 !important;
  }
  
  #user-input:focus {
    background: transparent !important;
    border: none !important;
    outline: none !important;
  }
  
  /* Enhanced placeholder text */
  #user-input::placeholder {
    color: #64748b !important;
    font-size: 16px !important;
    font-style: italic !important;
    opacity: 1 !important;
    font-weight: 500 !important;
  }
  
  /* Ensure proper icon colors (matching desktop) */
  #plus-btn .fa-plus {
    color: #3b82f6 !important;
    font-size: 14px !important;
  }
  
  #mic-btn .fa-microphone {
    color: #3b82f6 !important;
    font-size: 14px !important;
  }
  
  /* Keep Send text visible on mobile (same as desktop) */
  #send-btn {
    color: white !important;
    font-weight: 600 !important;
    font-size: 14px !important;
  }
  
  /* Hide the arrow pseudo-element on mobile */
  #send-btn::before {
    display: none !important;
  }
}

/* Additional mobile responsive breakpoints */
@media (max-width: 375px) {
  .flex.items-center.bg-white.rounded-2xl {
    padding: 12px !important;
    gap: 0 !important;
    min-height: 60px !important;
    width: 99.5% !important;
    min-width: 360px !important;
    background: white !important;
    border-radius: 25px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
    justify-content: space-between !important;
  }
  
  #user-input {
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 8px !important;
    padding: 12px 16px !important;
  }
  
  #mic-btn, #send-btn, #plus-btn {
    min-width: 26px !important;
    min-height: 26px !important;
  }
  
  #send-btn {
    min-width: 38px !important;
    padding: 6px !important;
    color: white !important;
    background: #0d9488 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  #send-btn::before {
    content: "➤" !important;
    font-size: 13px !important;
    color: white !important;
    font-weight: bold !important;
  }
}

@media (max-width: 320px) {
  .flex.items-center.bg-white.rounded-2xl {
    padding: 10px !important;
    gap: 0 !important;
    min-height: 58px !important;
    width: 99.8% !important;
    min-width: 340px !important;
    margin: 0 auto !important;
    background: white !important;
    border-radius: 25px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
    justify-content: space-between !important;
  }
  
  #user-input {
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 8px !important;
    padding: 10px 14px !important;
    font-size: 15px !important;
  }
  
  #mic-btn, #send-btn, #plus-btn {
    min-width: 24px !important;
    min-height: 24px !important;
  }
  
  #send-btn {
    min-width: 36px !important;
    padding: 5px 8px !important;
  }
  
  #send-btn {
    color: white !important;
    background: #0d9488 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  #send-btn::before {
    content: "➤" !important;
    font-size: 14px !important;
    color: white !important;
    font-weight: bold !important;
  }
}

/* Mobile touch optimizations */
@media (max-width: 480px) {
  /* Ensure proper touch targets */
  #mic-btn, #send-btn, #plus-btn {
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
  }
  
  /* Active states for better touch feedback */
  #mic-btn:active, #send-btn:active, #plus-btn:active {
    transform: scale(0.95) !important;
    transition: transform 0.1s ease !important;
  }
  
  /* Enhanced focus states for accessibility */
  #user-input:focus {
    outline: none !important;
    border-color: #8b5cf6 !important;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2) !important;
  }
  
  /* Smooth animations for all interactive elements */
  .flex.items-center.bg-white.rounded-2xl * {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
  
  /* Ensure send button shows icon on all mobile sizes */
  #send-btn {
    background: #0d9488 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0 !important;
    color: transparent !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
  }
  
  #send-btn::before {
    content: "➤" !important;
    color: white !important;
    font-weight: bold !important;
    display: block !important;
    text-align: center !important;
    width: 100% !important;
    height: 100% !important;
    line-height: 28px !important;
  }
}

/* Hide page scrollbar but keep scrolling */
html, body {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}
html::-webkit-scrollbar, body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none; /* Chrome, Safari, Opera */
}

/* Ensure mic and send align horizontally (mic left of send) on all sizes */
.mobile-right-buttons {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
}

/* (Reverted) remove chat-inside-card scrolling */

/* Ensure dropdowns/popups are always on top */
#settings-dropdown,
#upload-popup,
.plus-popup {
  z-index: 10050 !important;
}

/* Ensure settings container stacks above chat UI */
.fixed.top-4.right-4.z-50 {
  z-index: 10100 !important;
}

@media (max-width: 480px) {
  /* Center the bottom input bar container */
  .fixed.bottom-0.left-0.right-0 .container.mx-auto.px-4.py-4.max-w-4xl {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  /* Center the input bar and prevent overflow */
  .flex.items-center.bg-white.rounded-2xl {
    margin-left: auto !important;
    margin-right: auto !important;
    width: 92% !important;
    max-width: 420px !important;
    min-width: auto !important;
  }
}

@media (max-width: 375px) {
  .flex.items-center.bg-white.rounded-2xl {
    width: 94% !important;
    max-width: 360px !important;
    min-width: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 320px) {
  .flex.items-center.bg-white.rounded-2xl {
    width: 96% !important;
    max-width: 310px !important;
    min-width: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Enhanced AI Training Response Styles */

/* Empathy Response Styles */
.empathy-response {
  background: linear-gradient(135deg, #e0f2fe 0%, #b3e5fc 100%);
  border-left: 4px solid #2196f3;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(33, 150, 243, 0.1);
}

.empathy-response .text-blue-800 {
  color: #1565c0;
  font-weight: 600;
  margin-bottom: 8px;
}

.empathy-response .text-blue-700 {
  color: #1976d2;
  line-height: 1.6;
}

/* Medical Information Styles */
.medical-info {
  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
  border-left: 4px solid #ff9800;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(255, 152, 0, 0.1);
}

.medical-info h4 {
  color: #e65100;
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 14px;
}

.medical-info p {
  color: #f57c00;
  line-height: 1.6;
  margin-bottom: 8px;
}

/* Wellness Guidance Styles */
.wellness-guidance {
  background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
  border-left: 4px solid #9c27b0;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(156, 39, 176, 0.1);
}

.wellness-guidance h4 {
  color: #6a1b9a;
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 14px;
}

.wellness-guidance p {
  color: #8e24aa;
  line-height: 1.6;
}

/* Symptom Analysis Styles */
.symptom-analysis {
  background: linear-gradient(135deg, #fffde7 0%, #fff9c4 100%);
  border-left: 4px solid #ffc107;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(255, 193, 7, 0.1);
}

.symptom-analysis h4 {
  color: #f57f17;
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 14px;
}

.symptom-analysis p {
  color: #f9a825;
  line-height: 1.6;
}

/* Consultation Warning Styles */
.consultation-warning {
  background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
  border-left: 4px solid #f44336;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(244, 67, 54, 0.1);
  animation: pulse 2s infinite;
}

.consultation-warning h4 {
  color: #c62828;
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 16px;
}

.consultation-warning p {
  color: #d32f2f;
  line-height: 1.6;
  margin-bottom: 12px;
}

.consultation-btn {
  background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
  color: white;
  padding: 8px 16px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  display: inline-block;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(244, 67, 54, 0.3);
}

.consultation-btn:hover {
  background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(244, 67, 54, 0.4);
}

/* AI Response Styles */
.ai-response {
  background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%);
  border-left: 4px solid #4caf50;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.1);
}

.ai-response h4 {
  color: #2e7d32;
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 14px;
}

.ai-response p {
  color: #388e3c;
  line-height: 1.6;
}

/* Fallback Response Styles */
.fallback-response {
  background: linear-gradient(135deg, #f5f5f5 0%, #eeeeee 100%);
  border-left: 4px solid #9e9e9e;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(158, 158, 158, 0.1);
}

.fallback-response p {
  color: #616161;
  line-height: 1.6;
}

/* Voice Response Styles */
.voice-response {
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
  border-left: 4px solid #2196f3;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(33, 150, 243, 0.1);
}

.voice-response h4 {
  color: #1565c0;
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 14px;
}

.voice-response p {
  color: #1976d2;
  line-height: 1.6;
}

/* Animation for consultation warning */
@keyframes pulse {
  0% {
    box-shadow: 0 2px 8px rgba(244, 67, 54, 0.1);
  }
  50% {
    box-shadow: 0 2px 12px rgba(244, 67, 54, 0.2);
  }
  100% {
    box-shadow: 0 2px 8px rgba(244, 67, 54, 0.1);
  }
}

/* Enhanced message bubble styles */
.message-bubble {
  position: relative;
  overflow: hidden;
}

.message-bubble::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 3s infinite;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Responsive design for mobile */
@media (max-width: 768px) {
  .empathy-response,
  .medical-info,
  .wellness-guidance,
  .symptom-analysis,
  .consultation-warning,
  .ai-response,
  .fallback-response,
  .voice-response {
    padding: 12px;
    margin-bottom: 12px;
  }
  
  .consultation-btn {
    padding: 6px 12px;
    font-size: 14px;
  }
}

/* Dark mode support for AI responses */
.dark-mode .empathy-response {
  background: linear-gradient(135deg, #1a237e 0%, #283593 100%);
  border-left-color: #3f51b5;
}

.dark-mode .medical-info {
  background: linear-gradient(135deg, #e65100 0%, #ff9800 100%);
  border-left-color: #ff9800;
}

.dark-mode .wellness-guidance {
  background: linear-gradient(135deg, #4a148c 0%, #7b1fa2 100%);
  border-left-color: #9c27b0;
}

/* HealthAlpha AI Specific Styles */
.empathy-response h4 {
  color: #1976d2;
  font-size: 18px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.medical-info h4 {
  color: #2e7d32;
  font-size: 16px;
  margin: 16px 0 8px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.consultation-warning.urgent {
  background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
  border-left: 4px solid #f44336;
  animation: urgentPulse 2s infinite;
}

.consultation-warning.urgent h4 {
  color: #d32f2f;
  font-size: 18px;
  margin-bottom: 12px;
}

.consultation-btn.urgent-btn {
  background: #f44336;
  color: white;
  padding: 12px 24px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  display: inline-block;
  margin-top: 12px;
  transition: all 0.3s ease;
}

.consultation-btn.urgent-btn:hover {
  background: #d32f2f;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(244, 67, 54, 0.3);
}

@keyframes urgentPulse {
  0% { box-shadow: 0 2px 8px rgba(244, 67, 54, 0.1); }
  50% { box-shadow: 0 4px 16px rgba(244, 67, 54, 0.3); }
  100% { box-shadow: 0 2px 8px rgba(244, 67, 54, 0.1); }
}

.dark-mode .symptom-analysis {
  background: linear-gradient(135deg, #f57f17 0%, #ffc107 100%);
  border-left-color: #ffc107;
}

.dark-mode .consultation-warning {
  background: linear-gradient(135deg, #b71c1c 0%, #f44336 100%);
  border-left-color: #f44336;
}

.dark-mode .ai-response {
  background: linear-gradient(135deg, #1b5e20 0%, #388e3c 100%);
  border-left-color: #4caf50;
}