File size: 1,102 Bytes
ae2f7e5
 
 
 
 
 
 
 
 
 
08c5e37
0c4cce1
 
ae2f7e5
 
 
 
 
0c4cce1
 
ae2f7e5
 
 
 
 
0c4cce1
ae2f7e5
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
36526b2
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
.message {
	width: 100%;
	overflow-wrap: break-word;
	display: flex;
	gap: var(--section-gap);
	padding: var(--section-gap);
	padding-bottom: 0;
}

.message:last-child {
	animation: 0.6s show_message;
}

@keyframes show_message {
	from {
		transform: translateY(10px);
		opacity: 0;
	}
}

.message .avatar-container img {
	max-width: 48px;
	max-height: 48px;
	box-shadow: 0.4px 0.5px 0.7px -2px rgba(0, 0, 0, 0.08), 1.1px 1.3px 2px -2px rgba(0, 0, 0, 0.041),
		2.7px 3px 4.8px -2px rgba(0, 0, 0, 0.029), 9px 10px 16px -2px rgba(0, 0, 0, 0.022);
}

.message .content {
	display: flex;
	flex-direction: column;
	width: 90%;
	gap: 18px;
}

.message .content p,
.message .content li,
.message .content code {
	font-size: 1rem;
	line-height: 1.3;
}

@media screen and (max-height: 720px) {
	.message {
		padding: 12px;
		gap: 0;
	}

	.message .content {
		margin-left: 8px;
		width: 80%;
	}

	.message .avatar-container img {
		max-width: 32px;
		max-height: 32px;
	}

	.message .content,
	.message .content p,
	.message .content li,
	.message .content code {
		font-size: 0.875rem;
		line-height: 1.3;
	}
}