/* Styling for AI Chatbot */

/* Animation for typing indicator */
@keyframes pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}

/* Message container styling */
.message-container {
  display: flex;
  margin-bottom: 16px;
  width: 100%;
  align-items: flex-start;
}

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

.assistant-message {
  justify-content: flex-start;
}

/* Message bubble styling */
.message-bubble {
  max-width: 80%;
  border-radius: 12px;
  padding: 10px 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.user-bubble {
  background-color: #1890ff;
  color: white;
  margin-right: 8px;
}

.assistant-bubble {
  background-color: white;
  color: #333;
  margin-left: 8px;
}

/* Avatar styling */
.message-avatar {
  flex-shrink: 0;
}

.assistant-avatar {
  background-color: #1890ff;
}

.user-avatar {
  background-color: #52c41a;
}

/* Markdown content styling */
.markdown-content {
  font-size: 14px;
  line-height: 1.5;
  word-break: break-word;
  width: 100%;
}

.markdown-content p {
  margin-bottom: 16px;
  margin-top: 8px;
  line-height: 1.6;
  white-space: pre-wrap;
}

.markdown-content ul, 
.markdown-content ol {
  padding-left: 20px;
  margin-bottom: 10px;
}

.markdown-content h1, 
.markdown-content h2, 
.markdown-content h3, 
.markdown-content h4, 
.markdown-content h5, 
.markdown-content h6 {
  margin-top: 16px;
  margin-bottom: 8px;
  font-weight: 600;
}

.markdown-content img {
  max-width: 100%;
  border-radius: 4px;
}

.markdown-content table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 16px;
  border: 1px solid #ddd;
}

.markdown-content th, 
.markdown-content td {
  padding: 8px;
  text-align: left;
  border: 1px solid #ddd;
}

.markdown-content blockquote {
  border-left: 4px solid #ddd;
  padding-left: 10px;
  margin-left: 0;
  margin-bottom: 16px;
  color: #666;
}

/* Specific styles for user messages */
.user-markdown {
  color: white;
}

.user-markdown pre {
  background-color: #0076e4;
  border-radius: 6px;
  margin-bottom: 8px;
  color: white;
  padding: 12px;
  overflow-x: auto;
}

.user-markdown code {
  background-color: #0076e4;
  padding: 2px 4px;
  border-radius: 4px;
  color: #e6f7ff;
}

.user-markdown h1, 
.user-markdown h2, 
.user-markdown h3, 
.user-markdown h4, 
.user-markdown h5, 
.user-markdown h6 {
  color: white;
}

.user-markdown a {
  color: #e6f7ff;
  text-decoration: underline;
}

/* Specific styles for assistant messages */
.assistant-markdown {
  color: #333;
}

.assistant-markdown pre {
  background-color: #f0f2f5;
  border-radius: 6px;
  margin-bottom: 8px;
  padding: 12px;
  overflow-x: auto;
}

.assistant-markdown code {
  background-color: #f0f2f5;
  padding: 2px 4px;
  border-radius: 4px;
  color: #333;
}

.assistant-markdown a {
  color: #1890ff;
  text-decoration: underline;
}

/* Typing indicator styles */
.typing-container {
  display: flex;
  margin-bottom: 16px;
  width: 100%;
  align-items: flex-start;
  justify-content: flex-start;
}

.typing-bubble {
  background-color: white;
  border-radius: 12px;
  padding: 12px;
  margin-left: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.typing-indicator {
  display: flex;
  align-items: center;
  min-height: 20px;
}

.typing-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #1890ff;
  margin-right: 5px;
  animation: pulse 1.4s infinite ease-in-out;
}