Copilot-Webapp-Example/index.html at main · Jakon-Dev/Copilot-Webapp-Example · GitHub

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
<!doctype html>
<html lang="en">
  <head>
    <title>Copilot ChatBot</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />

    <style>
      :root {
        /* 🎨 Colores base */
        --color-black: #000000;         /* Jet Black */
        --color-charcoal: #2B2B2B;      /* Charcoal Gray */
        --color-slate: #3F3F3F;         /* Slate Gray */
        --color-silver: #A9A9A9;        /* Silver Gray */
        --color-light: #DCDCDC;         /* Light Gray */
        --color-pearl: #F5F5F5;         /* Pearl Gray */
        --color-white: #FFFFFF;         /* Snow White */
        --color-platinum: #E5E5E5;      /* Platinum */
        --color-iron: #474747;          /* Iron Gray */

        /* Gradients */
        --gradient-page: linear-gradient(135deg, var(--color-pearl), var(--color-light));
        --gradient-banner: linear-gradient(170deg, var(--color-charcoal), var(--color-iron));
        --gradient-chat: linear-gradient(50deg, var(--color-pearl), var(--color-pearl));

        /* Shadows */
        --shadow-banner: 0 2px 10px rgba(0, 0, 0, 0.25);
        --shadow-chat: 0 8px 24px rgba(0, 0, 0, 0.2);
      }

      html, body {
        height: 100%;
        margin: 0;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background: var(--gradient-page);
      }

      h1 {
        color: var(--color-white);
        font-size: 18px;
        font-weight: 500;
        padding: 0 20px;
        margin: 0;
      }

      #banner {
        height: 60px;
        display: flex;
        align-items: center;
        background: var(--gradient-banner);
        box-shadow: var(--shadow-banner);
      }

      #webchat {
        position: fixed;
        top: 70px;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        max-width: 1000px;
        height: calc(100% - 90px);
        border-radius: 12px;
        background: var(--gradient-chat);
        box-shadow: var(--shadow-chat);
        overflow: hidden;
        animation: fadeInUp 0.6s ease;
      }


      #webchat {
        background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iQ2FscXVlXzEiIGRhdGEtbmFtZT0iQ2FscXVlIDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDE0MTEuOTcgMjU1LjEyIj4KICA8ZGVmcz4KICAgIDxzdHlsZT4KICAgICAgLmNscy0xIHsKICAgICAgICBmaWxsOiBub25lOwogICAgICAgIHN0cm9rZTogIzNlMGQ4MTsKICAgICAgICBzdHJva2UtbWl0ZXJsaW1pdDogMTA7CiAgICAgICAgc3Ryb2tlLXdpZHRoOiA2cHg7CiAgICAgIH0KCiAgICAgIC5jbHMtMiB7CiAgICAgICAgZmlsbC1ydWxlOiBldmVub2RkOwogICAgICB9CgogICAgICAuY2xzLTIsIC5jbHMtMyB7CiAgICAgICAgZmlsbDogIzNlMGQ4MTsKICAgICAgICBzdHJva2Utd2lkdGg6IDBweDsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2RlZnM+CiAgPGc+CiAgICA8ZyBpZD0iQ2FscXVlXzIiIGRhdGEtbmFtZT0iQ2FscXVlIDIiPgogICAgICA8ZyBpZD0iQ2FscXVlXzEtMiIgZGF0YS1uYW1lPSJDYWxxdWUgMS0yIj4KICAgICAgICA8cGF0aCBpZD0iRmlsbC0xIiBjbGFzcz0iY2xzLTIiIGQ9Ik02MTEuODUsMTA0Ljk1aDBjLjc4LTguNzQsMy43OS0xNC45Miw5LjI4LTE4Ljk4LDUuNDktNC4wNiwxMi44My01Ljc2LDIyLjgzLTUuNzZzMTcuMzcsMS41OCwyMi41Myw0Ljg2YzUuOTcsMy44NSw4Ljk1LDEwLjE1LDkuNDMsMTkuODFoMGwtNjQuMDcuMDZaTTYxMS41NSwxMTIuMjZoNzIuOTZjMC0xMi42Mi0xLjQ5LTI1LjI3LTEyLjE3LTMyLjQ0LTguOTUtNS45Ny0xOS45My02Ljg2LTI4LjQ3LTYuODYtMTEuOTQsMC0yMC44OSwyLjMzLTI3LjgxLDcuMTMtOC4zNiw2LTEzLjE2LDE3LjA0LTEzLjE2LDMwLjExczMuNjEsMjIuOTgsMTEuMDcsMjkuNDJjNi42Miw1LjU1LDE1LjIyLDcuODIsMjkuNjMsNy44MiwxMi41My0uMzgsMjUuMDEtMS44MywzNy4zLTQuMzNoMHYtNy4zMWgwYy0xMi4wNiwyLjM4LTI0LjMsMy43My0zNi41OCw0LjAzLTExLjEsMC0xOS4xLTEuOTctMjQuMzUtNS45Ny01LjI1LTQtOC4zLTExLjEtOC40Ny0yMS41MWwuMDYtLjA5Wk03MzMuOSwxNDYuMzFjMTAuMDUtLjQzLDIwLjA0LTEuODEsMjkuODQtNC4xMnYtNi45OGMtOS4xOSwyLjExLTE4LjU0LDMuNC0yNy45NiwzLjg1LTYuOS41Mi0xMy43Ni0xLjMxLTE5LjQ5LTUuMTktNS42Ny00LjQ4LTguNDQtMTEuOTQtOC40NC0yMi41OSwwLTExLjIyLDMuNDMtMTguODksMTAuNTYtMjMuMjgsNS41Mi0zLjQzLDEyLjgtNC44NiwyMi42NS00Ljg2LDcuNTIsMCwxNC4xMS42NiwyMC44OSwxLjMxdi03LjI4Yy03LjA0LS42Ni0xMy42NC0xLjM0LTIwLjQ3LTEuMzQtMTAuMjcsMC0xOS4yMiwxLjM0LTI3LjA0LDUuOTctMTAuNjgsNS45Ny0xNC45MiwxNy40Ni0xNC45MiwyOS4zNnMyLjM2LDIxLjU0LDEwLjQxLDI4LjE0YzYuODYsNS43LDE1LjE2LDcuMDEsMjMuNzIsNy4wMWguMjRaTTg1MC45NiwxMTEuNjNjMCwxMC4zMi0yLjYzLDE3LjE5LTguMywyMS41NC01LjY3LDQuMzYtMTQuMTEsNS45Ny0yNS43Miw1Ljk3cy0xOS42Ni0yLTI1LjE5LTYuMjRjLTYuMjEtNC42My04Ljk1LTExLjk0LTguOTUtMjIuMzJzMi42Ni0xNy4zMSw4LjQ0LTIxLjY5YzUuNzktNC4zOSwxNC4xMS01Ljk3LDI1LjcyLTUuOTcsMTAuOCwwLDE4Ljk4LDEuODUsMjQuNTMsNS44Miw2LjU2LDQuNjgsOS40NiwxMi4yLDkuNDYsMjIuODlaTTg1OS4yOSwxMTAuOThjMC0xMS45NC0zLjMxLTIxLjkzLTExLjk0LTI4LjAyLTgtNS40LTE4LjI5LTcuMTMtMzAuNDEtNy4xM3MtMjIuNjgsMS43LTMwLjQ3LDcuMTNjLTguNTYsNS45Ny0xMS45NCwxNS45OS0xMS45NCwyOC4xN3MzLjQzLDIyLjA1LDExLjk0LDI4LjAyYzcuNzksNS40LDE4LjIsNy4xMywzMC40Nyw3LjEzczIyLjQxLTEuNTgsMzAuMzItNy4xM2M4LjU5LTUuOTcsMTEuOTQtMTUuODgsMTEuOTQtMjguMTdoLjA5Wk05NDAuMSwxNDQuNDZoNy43OXYtNDEuNzhjMC04LjQ0LTEuMDctMTQuOTItNi45OC0yMC4wOC01LjkxLTUuMTYtMTMuNy02Ljc3LTIyLjE0LTYuNzctMTEuNDksMC0yMy43MiwzLjMxLTM0LjY3LDUuOTdsLS42OS00LjA5aC02LjN2NjYuNzVoNy43OXYtNTUuOTJjMTEuOTQtMi43OCwyMS45OS01LjI4LDMzLjQ4LTUuMjgsNi43MSwwLDEyLjM4LDEuMTksMTYuMiw0LjQ4LDMuODIsMy4yOCw1LjUyLDcuODIsNS41MiwxNC45NXY0MS43OFpNMTA0Mi4zOSwxMTEuNjNjMCwxMC4zMi0yLjY2LDE3LjE5LTguMzMsMjEuNTQtNS42Nyw0LjM2LTE0LjExLDUuOTctMjUuNzIsNS45N3MtMTkuNjMtMi0yNS4xOS02LjI0Yy02LjE4LTQuNjMtOC45NS0xMS45NC04Ljk1LTIyLjMyczIuNjMtMTcuMzEsOC40NC0yMS42OWM1LjgyLTQuMzksMTQuMTEtNS45NywyNS42OS01Ljk3LDEwLjgzLDAsMTkuMDEsMS44NSwyNC41Myw1LjgyLDYuNTksNC42Myw5LjUyLDEyLjE0LDkuNTIsMjIuODZ2LjAzWk0xMDUwLjY4LDExMC45OGMwLTExLjk0LTMuMjgtMjEuOTMtMTEuOTQtMjguMDItNy45NC01LjQtMTguMDgtNy4xMy0zMC4zOC03LjEzcy0yMi42OCwxLjctMzAuNDQsNy4xM2MtOC41OSw1Ljk3LTExLjk0LDE1Ljk5LTExLjk0LDI4LjE3czMuNDMsMjIuMDUsMTEuOTQsMjguMDJjNy43Niw1LjQsMTguMiw3LjEzLDMwLjQ0LDcuMTNzMjIuNDQtMS41OCwzMC4zNS03LjEzYzguNTYtNS45NywxMS45NC0xNS44OCwxMS45NC0yOC4xN2guMDNaTTExMDAuMDQsMTQ2LjI4YzEwLS40NCwxOS45NC0xLjgyLDI5LjY5LTQuMTJ2LTYuOTVjLTkuMTksMi4xMS0xOC41NCwzLjQtMjcuOTYsMy44NS02Ljc4LjQ0LTEzLjUtMS4zOS0xOS4xMy01LjE5LTUuNjctNC40OC04LjQ0LTExLjk0LTguNDQtMjIuNTksMC0xMS4yMiwzLjQzLTE4Ljg5LDEwLjU2LTIzLjI4LDUuNC0zLjQzLDEyLjc3LTQuODYsMjIuNTMtNC44Niw3LjUyLDAsMTQuMTEuNjYsMjAuODksMS4zMXYtNy4yOGMtNy4xMy0uNjYtMTMuNzMtMS4zMS0yMC41Ni0xLjMxLTEwLjI5LDAtMTkuMTMsMS4zMS0yNy4wNCw1Ljk3LTEwLjY4LDUuOTctMTQuOTIsMTcuNDYtMTQuOTIsMjkuMzZzMi4zNiwyMS41NCwxMC40MSwyOC4xNGM2Ljg2LDUuNywxNS4xNiw3LjAxLDIzLjg3LDcuMDFsLjA5LS4wNlpNMTIxNy4yMiwxMTEuNjNjMCwxMC4zMi0yLjYzLDE3LjE5LTguMywyMS41NHMtMTQuMTEsNS45Ny0yNS43Miw1Ljk3LTE5LjY2LTItMjUuMTktNi4yNGMtNi4yMS00LjYzLTguOTUtMTEuOTQtOC45NS0yMi4zMnMyLjY2LTE3LjMxLDguNDQtMjEuNjljNS43OS00LjM5LDE0LjExLTUuOTcsMjUuNzItNS45NywxMC44LDAsMTguOTgsMS44NSwyNC41Myw1LjgyLDYuNTksNC42Myw5LjQ5LDEyLjE0LDkuNDksMjIuODZsLS4wMy4wM1pNMTIyNS41NSwxMTAuOThjMC0xMS45NC0zLjMxLTIxLjkzLTExLjk0LTI4LjAyLTcuOTQtNS40LTE4LjI2LTcuMTMtMzAuNDEtNy4xM3MtMjIuNjgsMS43LTMwLjQ3LDcuMTNjLTguNTYsNS45Ny0xMS45NCwxNS45OS0xMS45NCwyOC4xN3MzLjQzLDIyLjA1LDExLjk0LDI4LjAyYzcuNzksNS40LDE4LjIsNy4xMywzMC40Nyw3LjEzczIyLjQxLTEuNTgsMzAuMzItNy4xM2M4LjU5LTUuOTcsMTEuOTQtMTUuODgsMTEuOTQtMjguMTdoLjA5Wk0xMzcyLjc4LDE0NC40NnYtNDEuNzhjMC04LjQ0LTEuMDQtMTQuOTItNi41OS0yMC4wOC01LjU1LTUuMTYtMTMuMDQtNi43Ny0yMS4yMi02Ljc3LTExLjMxLjU0LTIyLjU0LDIuMjgtMzMuNDgsNS4xOWwtNC43NCwxLjFjLTUuOTctNC45Mi0xNC43NC02LjUxLTIzLjA0LTYuMy0xMS45NC4zLTMzLjI0LDUuOTctMzMuMjQsNS45N2wtLjY2LTMuOTdoLTYuMzN2NjYuNjNoNy43NnYtNTUuOTJjMTAuNTItMi41OSwyMS4yMi00LjM1LDMyLjAyLTUuMjgsNi42Mi0uMjcsMTMuODIsMS4xOSwxNy42NCw0LjQ4LDMuODIsMy4yOCw1LjU1LDcuODIsNS41NSwxNC45MnY0MS44MWg3Ljc5di00MS43OGMuMjktNC45Mi0uNTktOS44NC0yLjU3LTE0LjM1LDEuMTYtLjMsMi4zOS0uNiwzLjUyLS44NCw5LjQ5LTIuNDcsMTkuMjMtMy44OSwyOS4wMy00LjI0LDUuNTQtLjQ1LDExLjA1LDEuMTUsMTUuNDksNC41MSwzLjgzLDMuOTgsNS43Niw5LjQyLDUuMzEsMTQuOTJ2NDEuNzhoNy43NloiLz4KICAgICAgPC9nPgogICAgPC9nPgogICAgPGc+CiAgICAgIDxwYXRoIGNsYXNzPSJjbHMtMyIgZD0iTTg1NS40OCwxNzUuMDdoNi4yNHYyOC4zMmgxNy41N3Y1LjI4aC0yMy44MXYtMzMuNloiLz4KICAgICAgPHBhdGggY2xhc3M9ImNscy0zIiBkPSJNODg5LjAzLDE3NS4wN2g2LjI0djMzLjZoLTYuMjR2LTMzLjZaIi8+CiAgICAgIDxwYXRoIGNsYXNzPSJjbHMtMyIgZD0iTTkzOS42MiwxNzUuMDdsLTE0LjY0LDMzLjZoLTYuMTRsLTE0LjY5LTMzLjZoNi43N2wxMS4xOCwyNS45MiwxMS4yOC0yNS45Mmg2LjI0WiIvPgogICAgICA8cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Ik05NzMuMTcsMjAzLjQ0djUuMjNoLTI1LjJ2LTMzLjZoMjQuNTN2NS4yM2gtMTguMjl2OC43NGgxNi4yMnY1LjE0aC0xNi4yMnY5LjI2aDE4Ljk2WiIvPgogICAgICA8cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Ik0xMDA5Ljc5LDE4MC4zNWgtMTEuMTR2LTUuMjhoMjguNTF2NS4yOGgtMTEuMTR2MjguMzJoLTYuMjR2LTI4LjMyWiIvPgogICAgICA8cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Ik0xMDYxLjg3LDIwMy40NHY1LjIzaC0yNS4ydi0zMy42aDI0LjUzdjUuMjNoLTE4LjI5djguNzRoMTYuMjJ2NS4xNGgtMTYuMjJ2OS4yNmgxOC45NloiLz4KICAgICAgPHBhdGggY2xhc3M9ImNscy0zIiBkPSJNMTA3OS44NSwyMDYuOTJjLTIuNzQtMS40OS00Ljg4LTMuNTQtNi40My02LjE3LTEuNTUtMi42Mi0yLjMzLTUuNTgtMi4zMy04Ljg4cy43OC02LjI2LDIuMzUtOC44OGMxLjU3LTIuNjIsMy43Mi00LjY4LDYuNDYtNi4xNywyLjc0LTEuNDksNS44LTIuMjMsOS4xOS0yLjIzLDIuNzUsMCw1LjI2LjQ4LDcuNTQsMS40NCwyLjI3Ljk2LDQuMTksMi4zNSw1Ljc2LDQuMThsLTQuMDMsMy43OWMtMi40My0yLjYyLTUuNDItMy45NC04Ljk4LTMuOTQtMi4zLDAtNC4zNy41LTYuMTksMS41MXMtMy4yNSwyLjQxLTQuMjcsNC4yYy0xLjAyLDEuNzktMS41NCwzLjgzLTEuNTQsNi4xcy41MSw0LjMsMS41NCw2LjFjMS4wMiwxLjc5LDIuNDUsMy4xOSw0LjI3LDQuMnMzLjg5LDEuNTEsNi4xOSwxLjUxYzMuNTUsMCw2LjU0LTEuMzMsOC45OC0zLjk4bDQuMDMsMy44NGMtMS41NywxLjgyLTMuNSwzLjIyLTUuNzgsNC4xOC0yLjI5Ljk2LTQuODEsMS40NC03LjU2LDEuNDQtMy4zOSwwLTYuNDYtLjc0LTkuMTktMi4yM1oiLz4KICAgICAgPHBhdGggY2xhc3M9ImNscy0zIiBkPSJNMTE0My4wNCwxNzUuMDd2MzMuNmgtNi4yNHYtMTQuNGgtMTcuMzh2MTQuNGgtNi4yNHYtMzMuNmg2LjI0djEzLjg3aDE3LjM4di0xMy44N2g2LjI0WiIvPgogICAgPC9nPgogIDwvZz4KICA8bGluZSBjbGFzcz0iY2xzLTEiIHgxPSI1NDkuMzQiIHkxPSI0NS45NyIgeDI9IjU0OS4zNCIgeTI9IjIwOC42NyIvPgogIDxnPgogICAgPHBhdGggY2xhc3M9ImNscy0zIiBkPSJNOTYuMDgsMTQ0LjMzYy03LjIzLDIuOTItMTguMzUsMy4yLTI1LjI5LDMuMi03LjY0LDAtMTguNDgtLjU2LTI3LjEtMS4yNXYtNy45MmM4LjYyLjk3LDE5LjE4LDEuMzksMjcuOCwxLjM5LDUuODQsMCwxNC4zMi0uMTQsMTkuNi0xLjUzLDYuMzktMS44MSw4LjItNi4yNSw4LjItMTAuODQsMC01Ljg0LTIuOTItOC43Ni04Ljc2LTEwLjU2LTcuNjQtMi4zNi0xNS44NC0zLjA2LTI1LjU3LTQuODYtMTQuNTktMi42NC0yMS40LTcuNjQtMjEuNC0xOS4xOCwwLTYuMjUsMi4yMi0xMi42NSwxMC40Mi0xNi4xMiw2LjY3LTIuOTIsMTcuNjUtMy4yLDI0LjE4LTMuMiw3LjM3LDAsMTUuNzEuNTYsMjQuMDUsMS4zOXY3LjM3Yy04LjM0LS44My0xNi40LTEuMzktMjQuNi0xLjM5LTUuNywwLTEzLjQ4LjE0LTE4LjQ4LDEuNTMtNi4xMiwxLjY3LTcuNzgsNi4xMi03Ljc4LDEwLjI4LDAsNS41NiwyLjc4LDguNDgsOC42MiwxMC4yOSw3LjY0LDIuMjIsMTUuODQsMi45MiwyNS41Nyw0LjczLDE0LjU5LDIuNjQsMjEuNTQsNy42NCwyMS41NCwxOS40NiwwLDYuOTUtMi4zNiwxMy42Mi0xMC45OCwxNy4yM1oiLz4KICAgIDxwYXRoIGNsYXNzPSJjbHMtMyIgZD0iTTE2NC4xOSwxNDcuNTNjLTEzLjQ4LDAtMjIuMjQtMS45NS0yOS4xOS03Ljc4LTguMi03LjA5LTEwLjk4LTE3LjM3LTEwLjk4LTI5LjE5czMuNzUtMjMuMjEsMTMuMDYtMzAuMDJjNy43OC01LjQyLDE3LjM3LTcuMDksMjcuMzgtNy4wOSw5LjAzLDAsMTkuNDYuOTcsMjguMDgsNi44MSwxMC4xNSw2LjgxLDEyLjA5LDE4Ljc2LDEyLjA5LDMyLjM4aC03MS45OWMuMTQsOC4zNCwxLjgxLDE2LjEyLDguMzQsMjEuMjYsNC44NiwzLjc1LDEyLjM3LDUuOTgsMjMuOTEsNS45OCwxMi45MywwLDI1LjAyLTIuMDgsMzYuMjgtNC4wM3Y3LjM3Yy0xMS42NywyLjA5LTI0LjYsNC4zMS0zNi45Nyw0LjMxWk0xODYuNyw4NS42OGMtNS0zLjItMTIuMjMtNC44Ni0yMi4yNC00Ljg2cy0xNy41MSwyLjA4LTIyLjM4LDUuN2MtNS44NCw0LjMxLTguNDgsMTAuODQtOS4xNywxOC43Nmg2My4xYy0uNDItOC45LTMuMDYtMTUuNTctOS4zMS0xOS42WiIvPgogICAgPHBhdGggY2xhc3M9ImNscy0zIiBkPSJNMzU4Ljc3LDE0NS41OHYtNDMuOTJjMC03LjUxLTIuMDktMTIuNTEtNS41Ni0xNS43MS0zLjg5LTMuNDctOS41OS00LjczLTE2LjI2LTQuNzMtMTAuODQsMC0yMi4zOCwyLjY0LTM3LjM5LDYuMjUsMS42Nyw0LjE3LDIuMjIsOC45LDIuMjIsMTQuMTh2NDMuOTJoLTguMzR2LTQzLjkyYzAtNy45Mi0yLjIyLTEyLjkzLTUuOTgtMTYuMTItMy44OS0zLjItOS4zMS00LjMxLTE1LjcxLTQuMzEtMTEuNCwwLTIzLjQ5LDIuNjQtMzUuMyw1LjU2djU4Ljc5aC04LjJ2LTcwLjE5aDYuNjdsLjY5LDQuMDNjMTAuOTgtMi41LDI1LjE2LTUuOTgsMzYuODMtNS45OCw2LjEyLDAsMTEuODEuNjksMTYuODIsMy4zNCwyLjM2LDEuMjUsNC4xNywyLjUsNS44NCw0LjAzLDE2LjI2LTMuODksMzAuODUtNy4zNyw0Mi41My03LjM3LDguNjIsMCwxNi40LDEuNTMsMjIuMzgsNy4wOSw1Ljg0LDUuNTYsNi45NSwxMi4yMyw2Ljk1LDIxLjEzdjQzLjkyaC04LjJaIi8+CiAgICA8cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Ik0zOTUuNDcsNjQuNDJ2LTEwLjI4aDkuNTl2MTAuMjhoLTkuNTlaTTM5Ni4xNiwxNDUuNTh2LTcwLjE5aDguMnY3MC4xOWgtOC4yWiIvPgogICAgPHBhdGggY2xhc3M9ImNscy0zIiBkPSJNNDYyLjg4LDE0Ny41M2MtOS4wMywwLTE3Ljc5LTEuMzktMjUuMDItNy4zNy04LjQ4LTYuOTUtMTAuOTgtMTcuNjUtMTAuOTgtMjkuNnM0LjMxLTI0LjQ2LDE1LjU3LTMwLjg1YzguMzQtNC44NiwxNy42NS02LjI1LDI4LjQ5LTYuMjUsNy4yMywwLDE0LjE4LjY5LDIxLjY4LDEuMzl2Ny42NGMtNy4yMy0uNjktMTQuMTgtMS4zOS0yMi4xLTEuMzktMTAuMjksMC0xOC4wNywxLjUzLTIzLjc3LDUuMTQtNy41MSw0LjU5LTExLjEyLDEyLjY1LTExLjEyLDI0LjQ2czIuOTIsMTkuMDQsOC45LDIzLjc3YzQuNzMsMy42MSwxMS40LDUuNDIsMjAuMTUsNS40MnMxOS43NC0yLjA4LDI5LjQ3LTQuMDN2Ny4zN2MtMTAuMDEsMi4wOS0yMi4xLDQuMzEtMzEuMjcsNC4zMVoiLz4KICA8L2c+Cjwvc3ZnPg==') !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: auto 120px !important;
        background-color: var(--color-white) !important;
      }

      /*
      .webchat__basic-transcript__filler {
        background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iQ2FscXVlXzEiIGRhdGEtbmFtZT0iQ2FscXVlIDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDE0MTEuOTcgMjU1LjEyIj4KICA8ZGVmcz4KICAgIDxzdHlsZT4KICAgICAgLmNscy0xIHsKICAgICAgICBmaWxsOiBub25lOwogICAgICAgIHN0cm9rZTogIzNlMGQ4MTsKICAgICAgICBzdHJva2UtbWl0ZXJsaW1pdDogMTA7CiAgICAgICAgc3Ryb2tlLXdpZHRoOiA2cHg7CiAgICAgIH0KCiAgICAgIC5jbHMtMiB7CiAgICAgICAgZmlsbC1ydWxlOiBldmVub2RkOwogICAgICB9CgogICAgICAuY2xzLTIsIC5jbHMtMyB7CiAgICAgICAgZmlsbDogIzNlMGQ4MTsKICAgICAgICBzdHJva2Utd2lkdGg6IDBweDsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2RlZnM+CiAgPGc+CiAgICA8ZyBpZD0iQ2FscXVlXzIiIGRhdGEtbmFtZT0iQ2FscXVlIDIiPgogICAgICA8ZyBpZD0iQ2FscXVlXzEtMiIgZGF0YS1uYW1lPSJDYWxxdWUgMS0yIj4KICAgICAgICA8cGF0aCBpZD0iRmlsbC0xIiBjbGFzcz0iY2xzLTIiIGQ9Ik02MTEuODUsMTA0Ljk1aDBjLjc4LTguNzQsMy43OS0xNC45Miw5LjI4LTE4Ljk4LDUuNDktNC4wNiwxMi44My01Ljc2LDIyLjgzLTUuNzZzMTcuMzcsMS41OCwyMi41Myw0Ljg2YzUuOTcsMy44NSw4Ljk1LDEwLjE1LDkuNDMsMTkuODFoMGwtNjQuMDcuMDZaTTYxMS41NSwxMTIuMjZoNzIuOTZjMC0xMi42Mi0xLjQ5LTI1LjI3LTEyLjE3LTMyLjQ0LTguOTUtNS45Ny0xOS45My02Ljg2LTI4LjQ3LTYuODYtMTEuOTQsMC0yMC44OSwyLjMzLTI3LjgxLDcuMTMtOC4zNiw2LTEzLjE2LDE3LjA0LTEzLjE2LDMwLjExczMuNjEsMjIuOTgsMTEuMDcsMjkuNDJjNi42Miw1LjU1LDE1LjIyLDcuODIsMjkuNjMsNy44MiwxMi41My0uMzgsMjUuMDEtMS44MywzNy4zLTQuMzNoMHYtNy4zMWgwYy0xMi4wNiwyLjM4LTI0LjMsMy43My0zNi41OCw0LjAzLTExLjEsMC0xOS4xLTEuOTctMjQuMzUtNS45Ny01LjI1LTQtOC4zLTExLjEtOC40Ny0yMS41MWwuMDYtLjA5Wk03MzMuOSwxNDYuMzFjMTAuMDUtLjQzLDIwLjA0LTEuODEsMjkuODQtNC4xMnYtNi45OGMtOS4xOSwyLjExLTE4LjU0LDMuNC0yNy45NiwzLjg1LTYuOS41Mi0xMy43Ni0xLjMxLTE5LjQ5LTUuMTktNS42Ny00LjQ4LTguNDQtMTEuOTQtOC40NC0yMi41OSwwLTExLjIyLDMuNDMtMTguODksMTAuNTYtMjMuMjgsNS41Mi0zLjQzLDEyLjgtNC44NiwyMi42NS00Ljg2LDcuNTIsMCwxNC4xMS42NiwyMC44OSwxLjMxdi03LjI4Yy03LjA0LS42Ni0xMy42NC0xLjM0LTIwLjQ3LTEuMzQtMTAuMjcsMC0xOS4yMiwxLjM0LTI3LjA0LDUuOTctMTAuNjgsNS45Ny0xNC45MiwxNy40Ni0xNC45MiwyOS4zNnMyLjM2LDIxLjU0LDEwLjQxLDI4LjE0YzYuODYsNS43LDE1LjE2LDcuMDEsMjMuNzIsNy4wMWguMjRaTTg1MC45NiwxMTEuNjNjMCwxMC4zMi0yLjYzLDE3LjE5LTguMywyMS41NC01LjY3LDQuMzYtMTQuMTEsNS45Ny0yNS43Miw1Ljk3cy0xOS42Ni0yLTI1LjE5LTYuMjRjLTYuMjEtNC42My04Ljk1LTExLjk0LTguOTUtMjIuMzJzMi42Ni0xNy4zMSw4LjQ0LTIxLjY5YzUuNzktNC4zOSwxNC4xMS01Ljk3LDI1LjcyLTUuOTcsMTAuOCwwLDE4Ljk4LDEuODUsMjQuNTMsNS44Miw2LjU2LDQuNjgsOS40NiwxMi4yLDkuNDYsMjIuODlaTTg1OS4yOSwxMTAuOThjMC0xMS45NC0zLjMxLTIxLjkzLTExLjk0LTI4LjAyLTgtNS40LTE4LjI5LTcuMTMtMzAuNDEtNy4xM3MtMjIuNjgsMS43LTMwLjQ3LDcuMTNjLTguNTYsNS45Ny0xMS45NCwxNS45OS0xMS45NCwyOC4xN3MzLjQzLDIyLjA1LDExLjk0LDI4LjAyYzcuNzksNS40LDE4LjIsNy4xMywzMC40Nyw3LjEzczIyLjQxLTEuNTgsMzAuMzItNy4xM2M4LjU5LTUuOTcsMTEuOTQtMTUuODgsMTEuOTQtMjguMTdoLjA5Wk05NDAuMSwxNDQuNDZoNy43OXYtNDEuNzhjMC04LjQ0LTEuMDctMTQuOTItNi45OC0yMC4wOC01LjkxLTUuMTYtMTMuNy02Ljc3LTIyLjE0LTYuNzctMTEuNDksMC0yMy43MiwzLjMxLTM0LjY3LDUuOTdsLS42OS00LjA5aC02LjN2NjYuNzVoNy43OXYtNTUuOTJjMTEuOTQtMi43OCwyMS45OS01LjI4LDMzLjQ4LTUuMjgsNi43MSwwLDEyLjM4LDEuMTksMTYuMiw0LjQ4LDMuODIsMy4yOCw1LjUyLDcuODIsNS41MiwxNC45NXY0MS43OFpNMTA0Mi4zOSwxMTEuNjNjMCwxMC4zMi0yLjY2LDE3LjE5LTguMzMsMjEuNTQtNS42Nyw0LjM2LTE0LjExLDUuOTctMjUuNzIsNS45N3MtMTkuNjMtMi0yNS4xOS02LjI0Yy02LjE4LTQuNjMtOC45NS0xMS45NC04Ljk1LTIyLjMyczIuNjMtMTcuMzEsOC40NC0yMS42OWM1LjgyLTQuMzksMTQuMTEtNS45NywyNS42OS01Ljk3LDEwLjgzLDAsMTkuMDEsMS44NSwyNC41Myw1LjgyLDYuNTksNC42Myw5LjUyLDEyLjE0LDkuNTIsMjIuODZ2LjAzWk0xMDUwLjY4LDExMC45OGMwLTExLjk0LTMuMjgtMjEuOTMtMTEuOTQtMjguMDItNy45NC01LjQtMTguMDgtNy4xMy0zMC4zOC03LjEzcy0yMi42OCwxLjctMzAuNDQsNy4xM2MtOC41OSw1Ljk3LTExLjk0LDE1Ljk5LTExLjk0LDI4LjE3czMuNDMsMjIuMDUsMTEuOTQsMjguMDJjNy43Niw1LjQsMTguMiw3LjEzLDMwLjQ0LDcuMTNzMjIuNDQtMS41OCwzMC4zNS03LjEzYzguNTYtNS45NywxMS45NC0xNS44OCwxMS45NC0yOC4xN2guMDNaTTExMDAuMDQsMTQ2LjI4YzEwLS40NCwxOS45NC0xLjgyLDI5LjY5LTQuMTJ2LTYuOTVjLTkuMTksMi4xMS0xOC41NCwzLjQtMjcuOTYsMy44NS02Ljc4LjQ0LTEzLjUtMS4zOS0xOS4xMy01LjE5LTUuNjctNC40OC04LjQ0LTExLjk0LTguNDQtMjIuNTksMC0xMS4yMiwzLjQzLTE4Ljg5LDEwLjU2LTIzLjI4LDUuNC0zLjQzLDEyLjc3LTQuODYsMjIuNTMtNC44Niw3LjUyLDAsMTQuMTEuNjYsMjAuODksMS4zMXYtNy4yOGMtNy4xMy0uNjYtMTMuNzMtMS4zMS0yMC41Ni0xLjMxLTEwLjI5LDAtMTkuMTMsMS4zMS0yNy4wNCw1Ljk3LTEwLjY4LDUuOTctMTQuOTIsMTcuNDYtMTQuOTIsMjkuMzZzMi4zNiwyMS41NCwxMC40MSwyOC4xNGM2Ljg2LDUuNywxNS4xNiw3LjAxLDIzLjg3LDcuMDFsLjA5LS4wNlpNMTIxNy4yMiwxMTEuNjNjMCwxMC4zMi0yLjYzLDE3LjE5LTguMywyMS41NHMtMTQuMTEsNS45Ny0yNS43Miw1Ljk3LTE5LjY2LTItMjUuMTktNi4yNGMtNi4yMS00LjYzLTguOTUtMTEuOTQtOC45NS0yMi4zMnMyLjY2LTE3LjMxLDguNDQtMjEuNjljNS43OS00LjM5LDE0LjExLTUuOTcsMjUuNzItNS45NywxMC44LDAsMTguOTgsMS44NSwyNC41Myw1LjgyLDYuNTksNC42Myw5LjQ5LDEyLjE0LDkuNDksMjIuODZsLS4wMy4wM1pNMTIyNS41NSwxMTAuOThjMC0xMS45NC0zLjMxLTIxLjkzLTExLjk0LTI4LjAyLTcuOTQtNS40LTE4LjI2LTcuMTMtMzAuNDEtNy4xM3MtMjIuNjgsMS43LTMwLjQ3LDcuMTNjLTguNTYsNS45Ny0xMS45NCwxNS45OS0xMS45NCwyOC4xN3MzLjQzLDIyLjA1LDExLjk0LDI4LjAyYzcuNzksNS40LDE4LjIsNy4xMywzMC40Nyw3LjEzczIyLjQxLTEuNTgsMzAuMzItNy4xM2M4LjU5LTUuOTcsMTEuOTQtMTUuODgsMTEuOTQtMjguMTdoLjA5Wk0xMzcyLjc4LDE0NC40NnYtNDEuNzhjMC04LjQ0LTEuMDQtMTQuOTItNi41OS0yMC4wOC01LjU1LTUuMTYtMTMuMDQtNi43Ny0yMS4yMi02Ljc3LTExLjMxLjU0LTIyLjU0LDIuMjgtMzMuNDgsNS4xOWwtNC43NCwxLjFjLTUuOTctNC45Mi0xNC43NC02LjUxLTIzLjA0LTYuMy0xMS45NC4zLTMzLjI0LDUuOTctMzMuMjQsNS45N2wtLjY2LTMuOTdoLTYuMzN2NjYuNjNoNy43NnYtNTUuOTJjMTAuNTItMi41OSwyMS4yMi00LjM1LDMyLjAyLTUuMjgsNi42Mi0uMjcsMTMuODIsMS4xOSwxNy42NCw0LjQ4LDMuODIsMy4yOCw1LjU1LDcuODIsNS41NSwxNC45MnY0MS44MWg3Ljc5di00MS43OGMuMjktNC45Mi0uNTktOS44NC0yLjU3LTE0LjM1LDEuMTYtLjMsMi4zOS0uNiwzLjUyLS44NCw5LjQ5LTIuNDcsMTkuMjMtMy44OSwyOS4wMy00LjI0LDUuNTQtLjQ1LDExLjA1LDEuMTUsMTUuNDksNC41MSwzLjgzLDMuOTgsNS43Niw5LjQyLDUuMzEsMTQuOTJ2NDEuNzhoNy43NloiLz4KICAgICAgPC9nPgogICAgPC9nPgogICAgPGc+CiAgICAgIDxwYXRoIGNsYXNzPSJjbHMtMyIgZD0iTTg1NS40OCwxNzUuMDdoNi4yNHYyOC4zMmgxNy41N3Y1LjI4aC0yMy44MXYtMzMuNloiLz4KICAgICAgPHBhdGggY2xhc3M9ImNscy0zIiBkPSJNODg5LjAzLDE3NS4wN2g2LjI0djMzLjZoLTYuMjR2LTMzLjZaIi8+CiAgICAgIDxwYXRoIGNsYXNzPSJjbHMtMyIgZD0iTTkzOS42MiwxNzUuMDdsLTE0LjY0LDMzLjZoLTYuMTRsLTE0LjY5LTMzLjZoNi43N2wxMS4xOCwyNS45MiwxMS4yOC0yNS45Mmg2LjI0WiIvPgogICAgICA8cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Ik05NzMuMTcsMjAzLjQ0djUuMjNoLTI1LjJ2LTMzLjZoMjQuNTN2NS4yM2gtMTguMjl2OC43NGgxNi4yMnY1LjE0aC0xNi4yMnY5LjI2aDE4Ljk2WiIvPgogICAgICA8cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Ik0xMDA5Ljc5LDE4MC4zNWgtMTEuMTR2LTUuMjhoMjguNTF2NS4yOGgtMTEuMTR2MjguMzJoLTYuMjR2LTI4LjMyWiIvPgogICAgICA8cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Ik0xMDYxLjg3LDIwMy40NHY1LjIzaC0yNS4ydi0zMy42aDI0LjUzdjUuMjNoLTE4LjI5djguNzRoMTYuMjJ2NS4xNGgtMTYuMjJ2OS4yNmgxOC45NloiLz4KICAgICAgPHBhdGggY2xhc3M9ImNscy0zIiBkPSJNMTA3OS44NSwyMDYuOTJjLTIuNzQtMS40OS00Ljg4LTMuNTQtNi40My02LjE3LTEuNTUtMi42Mi0yLjMzLTUuNTgtMi4zMy04Ljg4cy43OC02LjI2LDIuMzUtOC44OGMxLjU3LTIuNjIsMy43Mi00LjY4LDYuNDYtNi4xNywyLjc0LTEuNDksNS44LTIuMjMsOS4xOS0yLjIzLDIuNzUsMCw1LjI2LjQ4LDcuNTQsMS40NCwyLjI3Ljk2LDQuMTksMi4zNSw1Ljc2LDQuMThsLTQuMDMsMy43OWMtMi40My0yLjYyLTUuNDItMy45NC04Ljk4LTMuOTQtMi4zLDAtNC4zNy41LTYuMTksMS41MXMtMy4yNSwyLjQxLTQuMjcsNC4yYy0xLjAyLDEuNzktMS41NCwzLjgzLTEuNTQsNi4xcy41MSw0LjMsMS41NCw2LjFjMS4wMiwxLjc5LDIuNDUsMy4xOSw0LjI3LDQuMnMzLjg5LDEuNTEsNi4xOSwxLjUxYzMuNTUsMCw2LjU0LTEuMzMsOC45OC0zLjk4bDQuMDMsMy44NGMtMS41NywxLjgyLTMuNSwzLjIyLTUuNzgsNC4xOC0yLjI5Ljk2LTQuODEsMS40NC03LjU2LDEuNDQtMy4zOSwwLTYuNDYtLjc0LTkuMTktMi4yM1oiLz4KICAgICAgPHBhdGggY2xhc3M9ImNscy0zIiBkPSJNMTE0My4wNCwxNzUuMDd2MzMuNmgtNi4yNHYtMTQuNGgtMTcuMzh2MTQuNGgtNi4yNHYtMzMuNmg2LjI0djEzLjg3aDE3LjM4di0xMy44N2g2LjI0WiIvPgogICAgPC9nPgogIDwvZz4KICA8bGluZSBjbGFzcz0iY2xzLTEiIHgxPSI1NDkuMzQiIHkxPSI0NS45NyIgeDI9IjU0OS4zNCIgeTI9IjIwOC42NyIvPgogIDxnPgogICAgPHBhdGggY2xhc3M9ImNscy0zIiBkPSJNOTYuMDgsMTQ0LjMzYy03LjIzLDIuOTItMTguMzUsMy4yLTI1LjI5LDMuMi03LjY0LDAtMTguNDgtLjU2LTI3LjEtMS4yNXYtNy45MmM4LjYyLjk3LDE5LjE4LDEuMzksMjcuOCwxLjM5LDUuODQsMCwxNC4zMi0uMTQsMTkuNi0xLjUzLDYuMzktMS44MSw4LjItNi4yNSw4LjItMTAuODQsMC01Ljg0LTIuOTItOC43Ni04Ljc2LTEwLjU2LTcuNjQtMi4zNi0xNS44NC0zLjA2LTI1LjU3LTQuODYtMTQuNTktMi42NC0yMS40LTcuNjQtMjEuNC0xOS4xOCwwLTYuMjUsMi4yMi0xMi42NSwxMC40Mi0xNi4xMiw2LjY3LTIuOTIsMTcuNjUtMy4yLDI0LjE4LTMuMiw3LjM3LDAsMTUuNzEuNTYsMjQuMDUsMS4zOXY3LjM3Yy04LjM0LS44My0xNi40LTEuMzktMjQuNi0xLjM5LTUuNywwLTEzLjQ4LjE0LTE4LjQ4LDEuNTMtNi4xMiwxLjY3LTcuNzgsNi4xMi03Ljc4LDEwLjI4LDAsNS41NiwyLjc4LDguNDgsOC42MiwxMC4yOSw3LjY0LDIuMjIsMTUuODQsMi45MiwyNS41Nyw0LjczLDE0LjU5LDIuNjQsMjEuNTQsNy42NCwyMS41NCwxOS40NiwwLDYuOTUtMi4zNiwxMy42Mi0xMC45OCwxNy4yM1oiLz4KICAgIDxwYXRoIGNsYXNzPSJjbHMtMyIgZD0iTTE2NC4xOSwxNDcuNTNjLTEzLjQ4LDAtMjIuMjQtMS45NS0yOS4xOS03Ljc4LTguMi03LjA5LTEwLjk4LTE3LjM3LTEwLjk4LTI5LjE5czMuNzUtMjMuMjEsMTMuMDYtMzAuMDJjNy43OC01LjQyLDE3LjM3LTcuMDksMjcuMzgtNy4wOSw5LjAzLDAsMTkuNDYuOTcsMjguMDgsNi44MSwxMC4xNSw2LjgxLDEyLjA5LDE4Ljc2LDEyLjA5LDMyLjM4aC03MS45OWMuMTQsOC4zNCwxLjgxLDE2LjEyLDguMzQsMjEuMjYsNC44NiwzLjc1LDEyLjM3LDUuOTgsMjMuOTEsNS45OCwxMi45MywwLDI1LjAyLTIuMDgsMzYuMjgtNC4wM3Y3LjM3Yy0xMS42NywyLjA5LTI0LjYsNC4zMS0zNi45Nyw0LjMxWk0xODYuNyw4NS42OGMtNS0zLjItMTIuMjMtNC44Ni0yMi4yNC00Ljg2cy0xNy41MSwyLjA4LTIyLjM4LDUuN2MtNS44NCw0LjMxLTguNDgsMTAuODQtOS4xNywxOC43Nmg2My4xYy0uNDItOC45LTMuMDYtMTUuNTctOS4zMS0xOS42WiIvPgogICAgPHBhdGggY2xhc3M9ImNscy0zIiBkPSJNMzU4Ljc3LDE0NS41OHYtNDMuOTJjMC03LjUxLTIuMDktMTIuNTEtNS41Ni0xNS43MS0zLjg5LTMuNDctOS41OS00LjczLTE2LjI2LTQuNzMtMTAuODQsMC0yMi4zOCwyLjY0LTM3LjM5LDYuMjUsMS42Nyw0LjE3LDIuMjIsOC45LDIuMjIsMTQuMTh2NDMuOTJoLTguMzR2LTQzLjkyYzAtNy45Mi0yLjIyLTEyLjkzLTUuOTgtMTYuMTItMy44OS0zLjItOS4zMS00LjMxLTE1LjcxLTQuMzEtMTEuNCwwLTIzLjQ5LDIuNjQtMzUuMyw1LjU2djU4Ljc5aC04LjJ2LTcwLjE5aDYuNjdsLjY5LDQuMDNjMTAuOTgtMi41LDI1LjE2LTUuOTgsMzYuODMtNS45OCw2LjEyLDAsMTEuODEuNjksMTYuODIsMy4zNCwyLjM2LDEuMjUsNC4xNywyLjUsNS44NCw0LjAzLDE2LjI2LTMuODksMzAuODUtNy4zNyw0Mi41My03LjM3LDguNjIsMCwxNi40LDEuNTMsMjIuMzgsNy4wOSw1Ljg0LDUuNTYsNi45NSwxMi4yMyw2Ljk1LDIxLjEzdjQzLjkyaC04LjJaIi8+CiAgICA8cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Ik0zOTUuNDcsNjQuNDJ2LTEwLjI4aDkuNTl2MTAuMjhoLTkuNTlaTTM5Ni4xNiwxNDUuNTh2LTcwLjE5aDguMnY3MC4xOWgtOC4yWiIvPgogICAgPHBhdGggY2xhc3M9ImNscy0zIiBkPSJNNDYyLjg4LDE0Ny41M2MtOS4wMywwLTE3Ljc5LTEuMzktMjUuMDItNy4zNy04LjQ4LTYuOTUtMTAuOTgtMTcuNjUtMTAuOTgtMjkuNnM0LjMxLTI0LjQ2LDE1LjU3LTMwLjg1YzguMzQtNC44NiwxNy42NS02LjI1LDI4LjQ5LTYuMjUsNy4yMywwLDE0LjE4LjY5LDIxLjY4LDEuMzl2Ny42NGMtNy4yMy0uNjktMTQuMTgtMS4zOS0yMi4xLTEuMzktMTAuMjksMC0xOC4wNywxLjUzLTIzLjc3LDUuMTQtNy41MSw0LjU5LTExLjEyLDEyLjY1LTExLjEyLDI0LjQ2czIuOTIsMTkuMDQsOC45LDIzLjc3YzQuNzMsMy42MSwxMS40LDUuNDIsMjAuMTUsNS40MnMxOS43NC0yLjA4LDI5LjQ3LTQuMDN2Ny4zN2MtMTAuMDEsMi4wOS0yMi4xLDQuMzEtMzEuMjcsNC4zMVoiLz4KICA8L2c+Cjwvc3ZnPg==') !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: auto 120px !important;
      }
      */

      @keyframes fadeInUp {
        from {
          opacity: 0;
          transform: translate(-50%, 30px);
        }
        to {
          opacity: 1;
          transform: translate(-50%, 0);
        }
      }

      .webchat__stacked-layout__content {
        animation: bubbleEntry 0.3s ease-out;
      }

      @keyframes bubbleEntry {
        from {
          transform: translateY(10px);
          opacity: 0;
        }
        to {
          transform: translateY(0);
          opacity: 1;
        }
      }

      .webchat__send-box__main {
        height: 80px !important;
      }

      .webchat__suggested-action {
        background-color: var(--color-white) !important;
        color: var(--color-black) !important;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        border-radius: 15px !important;
        transform: scale(1);
        cursor: pointer;
      }

      .webchat__suggested-action:hover {
        background-color: var(--color-light) !important;
        transform: scale(1.04) translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      }

      /* webchat--css-efhxs-ox0ocs webchat__icon-button webchat__icon-button--stretch webchat__send-button webchat__send-box__button webchat__send-box__button--align-stretch */

      /* webchat--css-efhxs-149homs webchat__upload-button webchat--css-efhxs-q9c6z2 webchat__send-box__button webchat__send-box__button--align-stretch */

      .webchat__send-box__button {
        background-color: var(--color-white) !important;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0;
        border-radius: 15px !important;
        cursor: pointer !important;
        width: 60px !important;
        height: 60px !important;
        margin: 10px !important;
        justify-self: center !important;
        align-self: center !important;
        transform: scale(1);
      }
      .webchat__send-box__button:hover {
        background-color: var(--color-light) !important;
        transform: scale(1.01) translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      }

      .webchat--css-hxhre-ox0ocs {
        width: 100% !important;
        height: 100% !important;
      }

      .webchat__send-icon, .webchat__attachment-icon {
        height: 35px !important;
        width: 35px !important;
      }

      button[type="submit"]:hover {
        background-color: var(--color-black) !important;
        color: var(--color-white) !important;
        transition: background-color 0.1s ease, color 0.1s ease;
      }
    </style>

  </head>
  <body>
    <div>
      <div id="banner">
        <h1>Personalized Chatbot</h1>
      </div>
      <div id="webchat" role="main"></div>
    </div>

    <script crossorigin="anonymous" src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>

    <script>
      (async function () {
        const styleOptions = {
          accent: '#000000',
          botAvatarBackgroundColor: '#000000',
          botAvatarInitials: 'AI',
          botAvatarImage: 'https://thumb.ac-illust.com/41/4137d1a06f24fba4ad746d7672551894_t.jpeg',
          userAvatarImage: 'https://learn.microsoft.com/azure/bot-service/v4sdk/media/logo_bot.svg',
          userAvatarInitials: 'ME',
          backgroundColor: 'transparent',
          bubbleBorderRadius: 10,
          bubbleNubSize: 6,
          bubbleFromUserBackground: '#e5e5e5',
          bubbleFromUserTextColor: '#000000',
          bubbleBackground: '#e5e5e5',
          bubbleTextColor: '#000000',
          sendBoxBackground: '#ffffff',
          sendBoxTextColor: '#000000',
          sendBoxButtonColor: '#000000',
          sendBoxButtonColorOnHover: '#474747',
          hideUploadButton: false,
          transcriptAnimation: true,
          enableAttachments: true
        };

        const tokenEndpointURL = new URL('AGENT_MAIL_CONEXION_TOKEN');
        const locale = document.documentElement.lang || 'en';
        const apiVersion = tokenEndpointURL.searchParams.get('api-version');

        const [directLineURL, token] = await Promise.all([
          fetch(new URL(`/powervirtualagents/regionalchannelsettings?api-version=${apiVersion}`, tokenEndpointURL))
            .then(response => {
              if (!response.ok) throw new Error('Failed to retrieve regional channel settings.');
              return response.json();
            })
            .then(({ channelUrlsById: { directline } }) => directline),
          fetch(tokenEndpointURL)
            .then(response => {
              if (!response.ok) throw new Error('Failed to retrieve Direct Line token.');
              return response.json();
            })
            .then(({ token }) => token)
        ]);

        const directLine = WebChat.createDirectLine({ domain: new URL('v3/directline', directLineURL), token });

        const subscription = directLine.connectionStatus$.subscribe({
          next(value) {
            if (value === 2) {
              directLine
                .postActivity({
                  localTimezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
                  locale,
                  name: 'startConversation',
                  type: 'event'
                })
                .subscribe();
              subscription.unsubscribe();
            }
          }
        });

        WebChat.renderWebChat({ directLine, locale, styleOptions }, document.getElementById('webchat'));
      })();
    </script>
  </body>
</html>