1.card-container {
2  background-color: #fff;
3  border-radius: 10px;
4  padding: 15px;
5  margin: 20px;
6  display: flex;
7  flex-direction: column;
8  width: 280px;
9}
10
11.card-header {
12  display: flex;
13  align-items: center;
14  padding-bottom: 10px;
15  border-bottom: 1px solid #ccc;
16}
17
18.card-header .img-avatar {
19  width: 50px;
20  height: 50px;
21  border-radius: 50%;
22  margin-right: 20px;
23  background-color: #333;
24}
25
26.card-header .text-chat {
27  color: black;
28  margin: 0;
29  font-size: 20px;
30}
31
32.card-body {
33  flex: 1;
34  overflow-y: auto;
35}
36
37.messages-container {
38  padding: 15px;
39}
40
41.message-box {
42  padding: 10px;
43  margin-bottom: 5px;
44  border-radius: 10px;
45}
46
47.message-box.left {
48  background-color: #f1f1f1;
49  color: black;
50  font-size: 13px;
51  left: 0;
52}
53
54.message-box.right {
55  background-color: #333;
56  color: #fff;
57  font-size: 13px;
58  right: 0;
59}
60
61.message-input {
62  padding: 5px;
63  border-top: 1px solid #ccc;
64}
65
66.message-input .message-send {
67  width: 100%;
68  padding: 10px;
69  border: none;
70  border-radius: 10px;
71  resize: none;
72}
73
74.message-input .button-send {
75  background-color: #333;
76  color: #fff;
77  padding: 10px 20px;
78  border: none;
79  cursor: pointer;
80  margin-left: 10px;
81  border-radius: 10px;
82  font-size: 13px;
83}
84
85.message-input .button-send:hover {
86  background-color: #f1f1f1;
87  color: #333;
88}
89