parle/index.css at main · CodeWithOz/parle · 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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
@import "tailwindcss";

body {
  font-family: 'Inter', sans-serif;
  background-color: #0f172a; /* Slate 900 */
  color: #e2e8f0; /* Slate 200 */
}

/* Custom pulse animation for the orb */
@keyframes soft-pulse {
  0% { transform: scale(1); opacity: 0.8; box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.4); }
  50% { transform: scale(1.05); opacity: 1; box-shadow: 0 0 20px 10px rgba(56, 189, 248, 0.2); }
  100% { transform: scale(1); opacity: 0.8; box-shadow: 0 0 0 0 rgba(56, 189, 248, 0); }
}

@keyframes speaking-wave {
  0% { transform: scale(1); border-radius: 50%; }
  25% { transform: scale(1.1) skewX(2deg); border-radius: 45%; }
  50% { transform: scale(0.95) skewY(-2deg); border-radius: 50%; }
  75% { transform: scale(1.05) skewX(-1deg); border-radius: 48%; }
  100% { transform: scale(1); border-radius: 50%; }
}

.orb-idle {
  animation: soft-pulse 4s infinite ease-in-out;
}

.orb-speaking {
  animation: speaking-wave 2s infinite ease-in-out;
}

/* Slide-up animation for new messages */
@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-slide-up {
  animation: slide-up 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Custom chat scrollbar */
.chat-scrollbar::-webkit-scrollbar {
  width: 4px;
}

.chat-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.chat-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.3);
  border-radius: 2px;
}

.chat-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.5);
}

/* Hint animations */
@keyframes hint-fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hint-expand {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 200px;
  }
}

.animate-hint-fade-in {
  animation: hint-fade-in 0.3s ease-out;
}

.animate-hint-expand {
  animation: hint-expand 0.2s ease-out;
}