@crestapps/ai-chat-ui 1.0.0-preview.7 → 1.0.0-preview.73

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,380 @@
1
+ .ai-chat-msg-role {
2
+ font-size: 1.25rem;
3
+ font-weight: 600;
4
+ text-transform: uppercase;
5
+ letter-spacing: 0.03em;
6
+ margin-bottom: 0.35rem;
7
+ }
8
+
9
+ .ai-chat-msg-role-user {
10
+ color: var(--bs-primary, #0d6efd);
11
+ }
12
+
13
+ .ai-chat-msg-role-assistant {
14
+ color: var(--ai-chat-primary, #198754);
15
+ }
16
+
17
+ .ai-chat-messages .ai-chat-message-item {
18
+ position: relative;
19
+ padding: 0.25rem 0;
20
+ }
21
+
22
+ .ai-chat-messages .ai-chat-message-item + .ai-chat-message-item::before {
23
+ content: '';
24
+ display: block;
25
+ width: 100%;
26
+ margin: 0.5rem auto 0.75rem;
27
+ border-top: 1px solid var(--bs-border-color, #dee2e6);
28
+ }
29
+
30
+ .ai-chat-messages .ai-chat-message-item p:last-child {
31
+ margin-bottom: 0;
32
+ }
33
+
34
+ .ai-chat-messages .ai-chat-message-body {
35
+ position: relative;
36
+ padding: 0;
37
+ overflow-wrap: break-word;
38
+ word-break: break-word;
39
+ min-width: 0;
40
+ }
41
+
42
+ .ai-chat-messages .ai-chat-message-body sup {
43
+ font-size: 0.75em;
44
+ line-height: 0;
45
+ }
46
+
47
+ .ai-chat-messages .ai-chat-citation-list {
48
+ margin: 0.75rem 0 0;
49
+ padding-left: 1.25rem;
50
+ }
51
+
52
+ .ai-chat-messages .ai-chat-citation-item + .ai-chat-citation-item {
53
+ margin-top: 0.25rem;
54
+ }
55
+
56
+ .ai-chat-messages .ai-chat-citation-item a {
57
+ word-break: break-word;
58
+ }
59
+
60
+ .ai-partial-transcript {
61
+ font-style: italic;
62
+ opacity: 0.7;
63
+ }
64
+
65
+ .ai-chat-messages .message-buttons-container {
66
+ position: absolute;
67
+ right: 0.1rem;
68
+ bottom: 0;
69
+ display: inline-flex;
70
+ align-items: center;
71
+ gap: 0.35rem;
72
+ width: auto;
73
+ max-width: max-content;
74
+ opacity: 0;
75
+ pointer-events: none;
76
+ transition: opacity 0.15s ease-in-out;
77
+ background: rgba(255, 255, 255, 0.96);
78
+ padding: 0.2rem 0.35rem;
79
+ border-radius: 999px;
80
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
81
+ margin-bottom: 1rem;
82
+ transform: translateY(50%);
83
+ z-index: 1;
84
+ }
85
+
86
+ .ai-chat-messages .ai-chat-message-item:hover .message-buttons-container,
87
+ .ai-chat-messages .ai-chat-message-item:focus-within .message-buttons-container {
88
+ opacity: 1;
89
+ pointer-events: auto;
90
+ }
91
+
92
+ .ai-chat-messages .message-buttons-container:has(.tts-playing) {
93
+ opacity: 1;
94
+ pointer-events: auto;
95
+ }
96
+
97
+ .ai-chat-messages .message-buttons-container > .button-message-toolbox {
98
+ display: inline-flex;
99
+ align-items: center;
100
+ justify-content: center;
101
+ flex: 0 0 auto;
102
+ width: 1.75rem;
103
+ height: 1.75rem;
104
+ margin: 0 !important;
105
+ padding: 0 !important;
106
+ border-radius: 50%;
107
+ color: var(--bs-secondary-color, #6c757d) !important;
108
+ text-decoration: none;
109
+ }
110
+
111
+ .ai-chat-messages .message-buttons-container .ai-chat-message-assistant-feedback {
112
+ display: inline-flex;
113
+ align-items: center;
114
+ gap: 0.35rem;
115
+ }
116
+
117
+ .ai-chat-messages .message-buttons-container > .button-message-toolbox:hover,
118
+ .ai-chat-messages .message-buttons-container > .button-message-toolbox:focus {
119
+ color: var(--bs-body-color, #212529) !important;
120
+ }
121
+
122
+ .ai-chat-messages .message-buttons-container .tts-playing {
123
+ color: var(--ai-chat-primary, #198754);
124
+ }
125
+
126
+ @keyframes spark-burst {
127
+ 0% {
128
+ transform: scale(1);
129
+ opacity: 1;
130
+ }
131
+ 20% {
132
+ transform: scale(1.8);
133
+ opacity: 0.7;
134
+ }
135
+ 40% {
136
+ transform: scale(0.9);
137
+ opacity: 1;
138
+ }
139
+ 60% {
140
+ transform: scale(1.3);
141
+ }
142
+ 100% {
143
+ transform: scale(1);
144
+ }
145
+ }
146
+
147
+ .spark-effect i,
148
+ .spark-effect svg {
149
+ display: inline-block;
150
+ animation: spark-burst 0.5s ease-out;
151
+ }
152
+
153
+ .ai-chat-messages .ai-bot-icon {
154
+ color: currentColor;
155
+ display: inline-block;
156
+ animation: none;
157
+ }
158
+
159
+ @keyframes ai-chat-streaming-effect {
160
+ 0% { opacity: 1; transform: rotate(0deg); }
161
+ 10% { opacity: 0.3; transform: rotate(0deg); }
162
+ 20% { opacity: 1; transform: rotate(0deg); }
163
+ 30% { opacity: 0.3; transform: rotate(0deg); }
164
+ 40% { opacity: 1; transform: rotate(0deg); }
165
+ 50% { opacity: 0.3; transform: rotate(0deg); }
166
+ 60% { opacity: 1; transform: rotate(0deg); }
167
+ 80% { opacity: 1; transform: rotate(360deg); }
168
+ 100% { opacity: 1; transform: rotate(360deg); }
169
+ }
170
+
171
+ .ai-chat-messages .ai-streaming-icon {
172
+ color: currentColor;
173
+ display: inline-block;
174
+ animation: ai-chat-streaming-effect 4s ease-in-out infinite;
175
+ }
176
+
177
+ .ai-chat-messages pre {
178
+ position: relative;
179
+ margin: 0;
180
+ }
181
+
182
+ .ai-chat-messages .ai-code-block {
183
+ border: 1px solid var(--bs-border-color, #dee2e6);
184
+ border-radius: 0.5rem;
185
+ overflow: hidden;
186
+ margin: 0.75rem 0;
187
+ background: var(--bs-body-bg, #fff);
188
+ }
189
+
190
+ .ai-chat-messages .ai-code-header {
191
+ display: flex;
192
+ align-items: center;
193
+ justify-content: space-between;
194
+ padding: 0.5rem 1rem;
195
+ font-size: 0.8rem;
196
+ min-height: 2rem;
197
+ }
198
+
199
+ .ai-chat-messages .ai-code-lang {
200
+ font-weight: 600;
201
+ color: var(--bs-body-color, #212529);
202
+ text-transform: capitalize;
203
+ }
204
+
205
+ .ai-chat-messages .ai-code-lang i {
206
+ color: var(--bs-secondary-color, #6c757d);
207
+ margin-right: 0.25rem;
208
+ }
209
+
210
+ .ai-chat-messages .ai-code-copy-btn {
211
+ display: inline-flex;
212
+ align-items: center;
213
+ gap: 0.3rem;
214
+ padding: 0.2rem;
215
+ font-size: 0.8rem;
216
+ background: transparent;
217
+ border: none;
218
+ cursor: pointer;
219
+ color: var(--bs-secondary-color, #6c757d);
220
+ transition: color 0.15s;
221
+ white-space: nowrap;
222
+ }
223
+
224
+ .ai-chat-messages .ai-code-copy-btn:hover {
225
+ color: var(--bs-body-color, #212529);
226
+ }
227
+
228
+ .ai-chat-messages .ai-code-block pre {
229
+ margin: 0;
230
+ background: transparent !important;
231
+ }
232
+
233
+ .ai-chat-messages .ai-code-block pre code.hljs {
234
+ background: transparent !important;
235
+ padding: 0.75rem 1rem 1rem;
236
+ }
237
+
238
+ .ai-chat-messages pre code.hljs {
239
+ white-space: pre-wrap;
240
+ word-wrap: break-word;
241
+ overflow-wrap: break-word;
242
+ border-radius: 0.375rem;
243
+ }
244
+
245
+ .ai-chat-doc-bar {
246
+ border-bottom: 1px solid var(--bs-border-color, #dee2e6);
247
+ }
248
+
249
+ .ai-chat-drag-over {
250
+ outline: 2px dashed var(--bs-primary, #0d6efd) !important;
251
+ outline-offset: -2px;
252
+ background-color: rgba(13, 110, 253, 0.05) !important;
253
+ }
254
+
255
+ .ai-chat-notification {
256
+ margin: 0.75rem 0 0.25rem;
257
+ padding: 0.625rem 0.875rem;
258
+ border-radius: 0.5rem;
259
+ border: 1px solid var(--bs-border-color, #dee2e6);
260
+ background-color: var(--bs-light, #f8f9fa);
261
+ font-size: 0.875rem;
262
+ line-height: 1.4;
263
+ }
264
+
265
+ .ai-chat-notification-content {
266
+ display: flex;
267
+ align-items: center;
268
+ gap: 0.5rem;
269
+ }
270
+
271
+ .ai-chat-notification-icon {
272
+ flex-shrink: 0;
273
+ font-size: 1rem;
274
+ opacity: 0.8;
275
+ }
276
+
277
+ .ai-chat-notification-text {
278
+ flex: 1;
279
+ }
280
+
281
+ .ai-chat-notification-dismiss {
282
+ flex-shrink: 0;
283
+ opacity: 0.5;
284
+ transition: opacity 0.15s;
285
+ }
286
+
287
+ .ai-chat-notification-dismiss:hover {
288
+ opacity: 1;
289
+ }
290
+
291
+ .ai-chat-notification-actions {
292
+ display: flex;
293
+ gap: 0.375rem;
294
+ margin-top: 0.5rem;
295
+ padding-top: 0.5rem;
296
+ border-top: 1px solid var(--bs-border-color, #dee2e6);
297
+ }
298
+
299
+ .ai-chat-notification-actions .btn {
300
+ font-size: 0.8125rem;
301
+ padding: 0.1875rem 0.625rem;
302
+ }
303
+
304
+ .ai-chat-notification-typing {
305
+ border-color: var(--ai-chat-primary, #198754);
306
+ background-color: rgba(25, 135, 84, 0.05);
307
+ }
308
+
309
+ .ai-chat-notification-typing .ai-chat-notification-icon {
310
+ color: var(--ai-chat-primary, #198754);
311
+ animation: ai-chat-typing-pulse 1.5s ease-in-out infinite;
312
+ }
313
+
314
+ @keyframes ai-chat-typing-pulse {
315
+ 0%, 100% { opacity: 0.4; }
316
+ 50% { opacity: 1; }
317
+ }
318
+
319
+ .ai-chat-notification-transfer {
320
+ border-color: var(--bs-warning, #ffc107);
321
+ background-color: rgba(255, 193, 7, 0.06);
322
+ }
323
+
324
+ .ai-chat-notification-transfer .ai-chat-notification-icon {
325
+ color: var(--bs-warning, #ffc107);
326
+ animation: ai-chat-transfer-pulse 2s ease-in-out infinite;
327
+ }
328
+
329
+ @keyframes ai-chat-transfer-pulse {
330
+ 0%, 100% { transform: scale(1); opacity: 0.7; }
331
+ 50% { transform: scale(1.1); opacity: 1; }
332
+ }
333
+
334
+ .ai-chat-notification-ended,
335
+ .ai-chat-notification-session-ended,
336
+ .ai-chat-notification-conversation-ended {
337
+ border-color: var(--bs-secondary, #6c757d);
338
+ background-color: rgba(108, 117, 125, 0.05);
339
+ }
340
+
341
+ .ai-chat-notification-ended .ai-chat-notification-icon,
342
+ .ai-chat-notification-session-ended .ai-chat-notification-icon,
343
+ .ai-chat-notification-conversation-ended .ai-chat-notification-icon {
344
+ color: var(--bs-secondary, #6c757d);
345
+ }
346
+
347
+ .ai-chat-notification-info,
348
+ .ai-chat-notification-agent-connected {
349
+ border-color: var(--bs-info, #0dcaf0);
350
+ background-color: rgba(13, 202, 240, 0.05);
351
+ }
352
+
353
+ .ai-chat-notification-info .ai-chat-notification-icon,
354
+ .ai-chat-notification-agent-connected .ai-chat-notification-icon {
355
+ color: var(--bs-info, #0dcaf0);
356
+ }
357
+
358
+ .ai-chat-notification-warning,
359
+ .ai-chat-notification-agent-reconnecting {
360
+ border-color: var(--bs-warning, #ffc107);
361
+ background-color: rgba(255, 193, 7, 0.06);
362
+ }
363
+
364
+ .ai-chat-notification-warning .ai-chat-notification-icon,
365
+ .ai-chat-notification-agent-reconnecting .ai-chat-notification-icon {
366
+ color: var(--bs-warning, #ffc107);
367
+ }
368
+
369
+ .ai-chat-notification-error,
370
+ .ai-chat-notification-connection-lost {
371
+ border-color: var(--bs-danger, #dc3545);
372
+ background-color: rgba(220, 53, 69, 0.05);
373
+ }
374
+
375
+ .ai-chat-notification-error .ai-chat-notification-icon,
376
+ .ai-chat-notification-connection-lost .ai-chat-notification-icon {
377
+ color: var(--bs-danger, #dc3545);
378
+ }
379
+
380
+ /*# sourceMappingURL=ai-chat.css.map */
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["ai-chat.css"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"ai-chat.css","sourcesContent":[".ai-chat-msg-role {\n font-size: 1.25rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.03em;\n margin-bottom: 0.35rem;\n}\n\n.ai-chat-msg-role-user {\n color: var(--bs-primary, #0d6efd);\n}\n\n.ai-chat-msg-role-assistant {\n color: var(--ai-chat-primary, #198754);\n}\n\n.ai-chat-messages .ai-chat-message-item {\n position: relative;\n padding: 0.25rem 0;\n}\n\n.ai-chat-messages .ai-chat-message-item + .ai-chat-message-item::before {\n content: '';\n display: block;\n width: 100%;\n margin: 0.5rem auto 0.75rem;\n border-top: 1px solid var(--bs-border-color, #dee2e6);\n}\n\n.ai-chat-messages .ai-chat-message-item p:last-child {\n margin-bottom: 0;\n}\n\n.ai-chat-messages .ai-chat-message-body {\n position: relative;\n padding: 0;\n overflow-wrap: break-word;\n word-break: break-word;\n min-width: 0;\n}\n\n.ai-chat-messages .ai-chat-message-body sup {\n font-size: 0.75em;\n line-height: 0;\n}\n\n.ai-chat-messages .ai-chat-citation-list {\n margin: 0.75rem 0 0;\n padding-left: 1.25rem;\n}\n\n.ai-chat-messages .ai-chat-citation-item + .ai-chat-citation-item {\n margin-top: 0.25rem;\n}\n\n.ai-chat-messages .ai-chat-citation-item a {\n word-break: break-word;\n}\n\n.ai-partial-transcript {\n font-style: italic;\n opacity: 0.7;\n}\n\n.ai-chat-messages .message-buttons-container {\n position: absolute;\n right: 0.1rem;\n bottom: 0;\n display: inline-flex;\n align-items: center;\n gap: 0.35rem;\n width: auto;\n max-width: max-content;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.15s ease-in-out;\n background: rgba(255, 255, 255, 0.96);\n padding: 0.2rem 0.35rem;\n border-radius: 999px;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n margin-bottom: 1rem;\n transform: translateY(50%);\n z-index: 1;\n}\n\n.ai-chat-messages .ai-chat-message-item:hover .message-buttons-container,\n.ai-chat-messages .ai-chat-message-item:focus-within .message-buttons-container {\n opacity: 1;\n pointer-events: auto;\n}\n\n.ai-chat-messages .message-buttons-container:has(.tts-playing) {\n opacity: 1;\n pointer-events: auto;\n}\n\n.ai-chat-messages .message-buttons-container > .button-message-toolbox {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: 0 0 auto;\n width: 1.75rem;\n height: 1.75rem;\n margin: 0 !important;\n padding: 0 !important;\n border-radius: 50%;\n color: var(--bs-secondary-color, #6c757d) !important;\n text-decoration: none;\n}\n\n.ai-chat-messages .message-buttons-container .ai-chat-message-assistant-feedback {\n display: inline-flex;\n align-items: center;\n gap: 0.35rem;\n}\n\n.ai-chat-messages .message-buttons-container > .button-message-toolbox:hover,\n.ai-chat-messages .message-buttons-container > .button-message-toolbox:focus {\n color: var(--bs-body-color, #212529) !important;\n}\n\n.ai-chat-messages .message-buttons-container .tts-playing {\n color: var(--ai-chat-primary, #198754);\n}\n\n@keyframes spark-burst {\n 0% {\n transform: scale(1);\n opacity: 1;\n }\n 20% {\n transform: scale(1.8);\n opacity: 0.7;\n }\n 40% {\n transform: scale(0.9);\n opacity: 1;\n }\n 60% {\n transform: scale(1.3);\n }\n 100% {\n transform: scale(1);\n }\n}\n\n.spark-effect i,\n.spark-effect svg {\n display: inline-block;\n animation: spark-burst 0.5s ease-out;\n}\n\n.ai-chat-messages .ai-bot-icon {\n color: currentColor;\n display: inline-block;\n animation: none;\n}\n\n@keyframes ai-chat-streaming-effect {\n 0% { opacity: 1; transform: rotate(0deg); }\n 10% { opacity: 0.3; transform: rotate(0deg); }\n 20% { opacity: 1; transform: rotate(0deg); }\n 30% { opacity: 0.3; transform: rotate(0deg); }\n 40% { opacity: 1; transform: rotate(0deg); }\n 50% { opacity: 0.3; transform: rotate(0deg); }\n 60% { opacity: 1; transform: rotate(0deg); }\n 80% { opacity: 1; transform: rotate(360deg); }\n 100% { opacity: 1; transform: rotate(360deg); }\n}\n\n.ai-chat-messages .ai-streaming-icon {\n color: currentColor;\n display: inline-block;\n animation: ai-chat-streaming-effect 4s ease-in-out infinite;\n}\n\n.ai-chat-messages pre {\n position: relative;\n margin: 0;\n}\n\n.ai-chat-messages .ai-code-block {\n border: 1px solid var(--bs-border-color, #dee2e6);\n border-radius: 0.5rem;\n overflow: hidden;\n margin: 0.75rem 0;\n background: var(--bs-body-bg, #fff);\n}\n\n.ai-chat-messages .ai-code-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0.5rem 1rem;\n font-size: 0.8rem;\n min-height: 2rem;\n}\n\n.ai-chat-messages .ai-code-lang {\n font-weight: 600;\n color: var(--bs-body-color, #212529);\n text-transform: capitalize;\n}\n\n.ai-chat-messages .ai-code-lang i {\n color: var(--bs-secondary-color, #6c757d);\n margin-right: 0.25rem;\n}\n\n.ai-chat-messages .ai-code-copy-btn {\n display: inline-flex;\n align-items: center;\n gap: 0.3rem;\n padding: 0.2rem;\n font-size: 0.8rem;\n background: transparent;\n border: none;\n cursor: pointer;\n color: var(--bs-secondary-color, #6c757d);\n transition: color 0.15s;\n white-space: nowrap;\n}\n\n.ai-chat-messages .ai-code-copy-btn:hover {\n color: var(--bs-body-color, #212529);\n}\n\n.ai-chat-messages .ai-code-block pre {\n margin: 0;\n background: transparent !important;\n}\n\n.ai-chat-messages .ai-code-block pre code.hljs {\n background: transparent !important;\n padding: 0.75rem 1rem 1rem;\n}\n\n.ai-chat-messages pre code.hljs {\n white-space: pre-wrap;\n word-wrap: break-word;\n overflow-wrap: break-word;\n border-radius: 0.375rem;\n}\n\n.ai-chat-doc-bar {\n border-bottom: 1px solid var(--bs-border-color, #dee2e6);\n}\n\n.ai-chat-drag-over {\n outline: 2px dashed var(--bs-primary, #0d6efd) !important;\n outline-offset: -2px;\n background-color: rgba(13, 110, 253, 0.05) !important;\n}\n\n.ai-chat-notification {\n margin: 0.75rem 0 0.25rem;\n padding: 0.625rem 0.875rem;\n border-radius: 0.5rem;\n border: 1px solid var(--bs-border-color, #dee2e6);\n background-color: var(--bs-light, #f8f9fa);\n font-size: 0.875rem;\n line-height: 1.4;\n}\n\n.ai-chat-notification-content {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n.ai-chat-notification-icon {\n flex-shrink: 0;\n font-size: 1rem;\n opacity: 0.8;\n}\n\n.ai-chat-notification-text {\n flex: 1;\n}\n\n.ai-chat-notification-dismiss {\n flex-shrink: 0;\n opacity: 0.5;\n transition: opacity 0.15s;\n}\n\n.ai-chat-notification-dismiss:hover {\n opacity: 1;\n}\n\n.ai-chat-notification-actions {\n display: flex;\n gap: 0.375rem;\n margin-top: 0.5rem;\n padding-top: 0.5rem;\n border-top: 1px solid var(--bs-border-color, #dee2e6);\n}\n\n.ai-chat-notification-actions .btn {\n font-size: 0.8125rem;\n padding: 0.1875rem 0.625rem;\n}\n\n.ai-chat-notification-typing {\n border-color: var(--ai-chat-primary, #198754);\n background-color: rgba(25, 135, 84, 0.05);\n}\n\n.ai-chat-notification-typing .ai-chat-notification-icon {\n color: var(--ai-chat-primary, #198754);\n animation: ai-chat-typing-pulse 1.5s ease-in-out infinite;\n}\n\n@keyframes ai-chat-typing-pulse {\n 0%, 100% { opacity: 0.4; }\n 50% { opacity: 1; }\n}\n\n.ai-chat-notification-transfer {\n border-color: var(--bs-warning, #ffc107);\n background-color: rgba(255, 193, 7, 0.06);\n}\n\n.ai-chat-notification-transfer .ai-chat-notification-icon {\n color: var(--bs-warning, #ffc107);\n animation: ai-chat-transfer-pulse 2s ease-in-out infinite;\n}\n\n@keyframes ai-chat-transfer-pulse {\n 0%, 100% { transform: scale(1); opacity: 0.7; }\n 50% { transform: scale(1.1); opacity: 1; }\n}\n\n.ai-chat-notification-ended,\n.ai-chat-notification-session-ended,\n.ai-chat-notification-conversation-ended {\n border-color: var(--bs-secondary, #6c757d);\n background-color: rgba(108, 117, 125, 0.05);\n}\n\n.ai-chat-notification-ended .ai-chat-notification-icon,\n.ai-chat-notification-session-ended .ai-chat-notification-icon,\n.ai-chat-notification-conversation-ended .ai-chat-notification-icon {\n color: var(--bs-secondary, #6c757d);\n}\n\n.ai-chat-notification-info,\n.ai-chat-notification-agent-connected {\n border-color: var(--bs-info, #0dcaf0);\n background-color: rgba(13, 202, 240, 0.05);\n}\n\n.ai-chat-notification-info .ai-chat-notification-icon,\n.ai-chat-notification-agent-connected .ai-chat-notification-icon {\n color: var(--bs-info, #0dcaf0);\n}\n\n.ai-chat-notification-warning,\n.ai-chat-notification-agent-reconnecting {\n border-color: var(--bs-warning, #ffc107);\n background-color: rgba(255, 193, 7, 0.06);\n}\n\n.ai-chat-notification-warning .ai-chat-notification-icon,\n.ai-chat-notification-agent-reconnecting .ai-chat-notification-icon {\n color: var(--bs-warning, #ffc107);\n}\n\n.ai-chat-notification-error,\n.ai-chat-notification-connection-lost {\n border-color: var(--bs-danger, #dc3545);\n background-color: rgba(220, 53, 69, 0.05);\n}\n\n.ai-chat-notification-error .ai-chat-notification-icon,\n.ai-chat-notification-connection-lost .ai-chat-notification-icon {\n color: var(--bs-danger, #dc3545);\n}\n"]}