chainlit.css

/* Custom theme for AI Evaluation Assistant */

:root {
  --primary-color: #4f46e5;
  --secondary-color: #8b5cf6;
  --accent-color: #10b981;
  --background-color: #f8fafc;
  --text-color: #1e293b;
  --light-text-color: #64748b;
}

/* Overall styling */
body {
  background-color: var(--background-color);
  color: var(--text-color);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* Message bubbles */
.cl-message-bubble {
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.cl-message-bubble.assistant {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: white;
}

/* Code blocks */
pre {
  background-color: #1e293b !important;
  border-radius: 8px !important;
}

/* Buttons */
.cl-button {
  border-radius: 8px;
  transition: all 0.2s ease;
}

.cl-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Input area */
.cl-chat-input {
  border-radius: 12px;
  border: 2px solid #e2e8f0;
  transition: border 0.3s ease;
}

.cl-chat-input:focus {
  border-color: var(--primary-color);
  outline: none;
}

/* Suggested queries */
.cl-suggested-queries {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.cl-suggested-query {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.cl-suggested-query:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2);
}

/* Hide download and collapse buttons */
.cl-message-actions button[aria-label="Download"],
.cl-collapse-button,
.cl-expand-button {
  display: none !important;
}

/* Always show message content in expanded state */
.cl-message-content {
  max-height: none !important;
  overflow: visible !important;
}

/* Remove any collapse indicators */
.cl-message-collapse-indicator {
  display: none !important;
}