1.card {
2  width: 260px;
3  background-color: #fff;
4  border: 1px solid #ccc;
5  border-radius: 5px;
6  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
7}
8
9.chat-header {
10  background-color: #333;
11  color: #fff;
12  padding: 10px;
13  font-size: 18px;
14  border-top-left-radius: 5px;
15  border-top-right-radius: 5px;
16}
17
18.chat-window {
19  height: 220px;
20  overflow-y: scroll;
21}
22
23.message-list {
24  list-style: none;
25  margin: 0;
26  padding: 0;
27}
28
29.chat-input {
30  display: flex;
31  align-items: center;
32  padding: 10px;
33  border-top: 1px solid #ccc;
34}
35
36.message-input {
37  flex: 1;
38  border: none;
39  outline: none;
40  padding: 5px;
41  font-size: 14px;
42}
43
44.send-button {
45  border: none;
46  outline: none;
47  background-color: #333;
48  color: #fff;
49  font-size: 14px;
50  padding: 5px 10px;
51  cursor: pointer;
52}
53
54.send-button:hover {
55  background-color: rgb(255, 255, 255);
56  color: rgb(0, 0, 0);
57  box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.25);
58}