awesome-ai-apps/multimodal-apps/multi-modal-chatbot/index.css at main · rohitg00/awesome-ai-apps · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom styles for the multi-modal chatbot */
.chat-bubble {
  @apply rounded-lg p-4 max-w-xs break-words;
}

.user-bubble {
  @apply bg-blue-600 text-white ml-auto;
}

.assistant-bubble {
  @apply bg-gray-700 text-gray-100 mr-auto;
}

.loading-dots {
  @apply inline-flex space-x-1;
}

.loading-dots div {
  @apply w-2 h-2 bg-gray-400 rounded-full animate-pulse;
}

.mode-selector {
  @apply flex space-x-2 p-1 bg-gray-800 rounded-lg;
}

.mode-button {
  @apply px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200;
}

.mode-button.active {
  @apply bg-purple-600 text-white;
}

.mode-button.inactive {
  @apply text-gray-400 hover:text-gray-200 hover:bg-gray-700;
}

/* Scrollbar styling */
.chat-container::-webkit-scrollbar {
  width: 6px;
}

.chat-container::-webkit-scrollbar-track {
  background: #374151;
  border-radius: 3px;
}

.chat-container::-webkit-scrollbar-thumb {
  background: #6b7280;
  border-radius: 3px;
}

.chat-container::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}