/*
 * This is a manifest file that'll be compiled into application.css.
 * This file includes public-facing styles for the main application.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* ============================================ */
/* Chat Page Styles - Chat Bubble Colors */
/* ============================================ */

/* Enhanced message bubble styling with high specificity */
div.message-bubble.user-message {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
  background-color: #3b82f6 !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3) !important;
}

div.message-bubble.ai-message {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%) !important;
  background-color: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.1) !important;
}

div.message-bubble.user-message:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2) !important;
}

div.message-bubble.ai-message:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.15) !important;
}

.message-bubble {
  position: relative;
  transition: all 0.2s ease;
}

/* Scrollbar styling for chat */
#chat_messages {
  scroll-behavior: smooth;
}

#chat_messages::-webkit-scrollbar {
  width: 6px;
}

#chat_messages::-webkit-scrollbar-track {
  background: #f1f5f9;
}

#chat_messages::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

#chat_messages::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}