1.container {
2  width: 300px;
3  height: 320px;
4  background-color: #343541;
5  border-radius: 8px;
6  display: flex;
7  flex-direction: column;
8}
9
10.nav-bar {
11  width: 100%;
12  height: 40px;
13  background-color: none;
14  display: flex;
15  align-items: center;
16  justify-content: space-between;
17}
18
19.nav-bar a {
20  color: #6B6C7B;
21  white-space: nowrap;
22  margin-left: 10px;
23  user-select: none;
24}
25
26.close {
27  width: 40px;
28  height: 40px;
29  display: flex;
30  justify-content: center;
31  align-items: center;
32  position: relative;
33  cursor: pointer;
34}
35
36.line {
37  position: absolute;
38  width: 20px;
39  height: 3px;
40  background-color: #6B6C7B;
41  border-radius: 30px;
42}
43
44.line.one {
45  transform: rotate(45deg)
46}
47
48.line.two {
49  transform: rotate(135deg)
50}
51
52.messages-area {
53  background-color: green;
54  width: 100%;
55  height: 210px;
56}
57
58.sender-area {
59  background-color: #343541;
60  width: 100%;
61  height: 70px;
62  display: flex;
63  border-radius: 8px;
64}
65
66.message {
67  width: 100%;
68  height: 40px;
69}
70
71.message.one,
72.message.three,
73.message.five {
74  background-color: #2E2F3A;
75}
76
77.message.two,
78.message.four,
79.message.six {
80  background-color: #343541;
81}
82
83.send-img {
84  width: 30px;
85}
86
87.send-input {
88  outline: none;
89  display: flex;
90  border: none;
91  background: none;
92  height: 40px;
93  width: 230px;
94  border-radius: 7px;
95  background: none;
96  color: white;
97  text-overflow: ellipsis;
98  white-space: nowrap;
99  overflow: hidden;
100  margin-left: 5px;
101}
102
103.send-input::placeholder {
104  color: #828E9E;
105}
106
107.input-place {
108  display: flex;
109  flex-direction: row;
110  margin-top: 15px;
111  margin-left: 10px;
112  align-items: center;
113  background-color: #40414F;
114  border-radius: 7px;
115  height: 40px;
116  width: 280px;
117  gap: 5px;
118  border: 1px solid #2E2F3A;
119}
120
121.send {
122  width: 30px;
123  height: 30px;
124  background-color: none;
125  display: flex;
126  align-items: center;
127  justify-content: center;
128  cursor: pointer;
129}
130
131.send-icon {
132  width: 17px;
133}