1
.file_attached {
2
    display: flex;
3
    min-width: 150px;
4
    max-width: calc(var(--sheldWidth) * 0.9);
5
    flex-direction: row;
6
    gap: 10px;
7
    align-items: center;
8
    margin: 0.25em auto;
9
    padding: 0 0.75em;
10
    border: 2px solid var(--SmartThemeBorderColor);
11
    border-radius: 15px;
12
    background-color: var(--white20a);
13
}
14

15
.mes_file_container {
16
    cursor: default;
17
    display: flex;
18
    gap: 15px;
19
    align-items: center;
20
    width: fit-content;
21
    max-width: 100%;
22
    background-color: var(--white20a);
23
    border: 2px solid var(--SmartThemeBorderColor);
24
    padding: 0.5em 1em;
25
    border-radius: 15px;
26
}
27

28
.mes .mes_file_wrapper:empty {
29
    display: none;
30
}
31

32
.mes .mes_file_wrapper {
33
    display: flex;
34
    flex-direction: column;
35
    gap: 0.5em;
36
    padding-right: var(--mes-right-spacing);
37
}
38

39
.mes_file_container .right_menu_button {
40
    padding-right: 0;
41
}
42

43
.mes_file_container .mes_file_size,
44
.file_attached .file_size {
45
    font-size: 0.9em;
46
    color: var(--SmartThemeQuoteColor);
47
}
48

49
.file_attached .file_name,
50
.mes_file_container .mes_file_name {
51
    flex: 1;
52
    overflow: hidden;
53
    text-overflow: ellipsis;
54
    white-space: nowrap;
55
}
56

57
#file_form {
58
    display: flex;
59
    width: 100%;
60
}
61

62
.file_modal {
63
    width: 100%;
64
    height: 100%;
65
    overflow-y: auto;
66
    display: flex;
67
    text-align: left;
68
}
69

70
/* Audio Player Styles */
71
.mes_audio_container {
72
    cursor: default;
73
    display: flex;
74
    width: fit-content;
75
    min-width: min(350px, 100%);
76
    max-width: 100%;
77
    background-color: var(--white20a);
78
    border: 2px solid var(--SmartThemeBorderColor);
79
    padding: 0.5em 1em;
80
    border-radius: 15px;
81
}
82

83
.mes_audio_container .mes_img_swipes {
84
    position: unset;
85
    opacity: unset;
86
    background: none;
87
    padding: 0;
88
}
89

90
.mes_audio_container .mes_img_swipes .right_menu_button {
91
    filter: brightness(75%);
92
    text-shadow: none;
93
}
94

95
.mes_audio_container .mes_img_swipes .mes_img_swipe_counter {
96
    filter: none;
97
    text-shadow: none;
98
}
99

100
.audio-player {
101
    display: flex;
102
    flex-direction: column;
103
    gap: 5px;
104
}
105

106
.audio-player-header {
107
    display: flex;
108
    flex-direction: row;
109
    gap: 15px;
110
    align-items: center;
111
    justify-content: space-between;
112
}
113

114
.audio-player-title {
115
    overflow: hidden;
116
    text-overflow: ellipsis;
117
    white-space: nowrap;
118
}
119

120
.audio-player-controls {
121
    display: flex;
122
    align-items: center;
123
    gap: 10px;
124
}
125

126
.audio-player-play-pause,
127
.audio-player-volume {
128
    background: none;
129
    border: none;
130
}
131

132
.audio-player-time-separator {
133
    font-size: 0.9em;
134
    text-align: center;
135
}
136

137
.audio-player-current-time,
138
.audio-player-total-time {
139
    font-size: 0.9em;
140
    color: var(--SmartThemeQuoteColor);
141
    min-width: 40px;
142
    text-align: center;
143
}
144

145
.audio-player-progress {
146
    flex: 1;
147
    height: 6px;
148
    background-color: var(--black30a);
149
    border-radius: 3px;
150
    cursor: pointer;
151
    position: relative;
152
    overflow: hidden;
153
}
154

155
.audio-player-progress-bar {
156
    height: 100%;
157
    background-color: var(--SmartThemeEmColor);
158
    border-radius: 3px;
159
    transition: width 0.1s linear;
160
    width: 0%;
161
}