@paymanai/payman-ask-sdk 1.2.22 → 1.2.24

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.
package/dist/styles.css CHANGED
@@ -1,3 +1,1896 @@
1
+ /* src/styles-v2.css */
2
+ .payman-v2-root {
3
+ --payman-v2-bg: var(--payman-v2-bg-override, #ffffff);
4
+ --payman-v2-bg-secondary: var(--payman-v2-bg-secondary-override, #f9f9f9);
5
+ --payman-v2-bg-tertiary: var(--payman-v2-bg-tertiary-override, #f2f2f2);
6
+ --payman-v2-bg-user: var(--payman-v2-bg-user-override, #f2f2f2);
7
+ --payman-v2-text-1: var(--payman-v2-text-1-override, #0d0d0d);
8
+ --payman-v2-text-2: var(--payman-v2-text-2-override, #4a4a4a);
9
+ --payman-v2-text-3: var(--payman-v2-text-3-override, #8e8e8e);
10
+ --payman-v2-text-4: var(--payman-v2-text-4-override, #b4b4b4);
11
+ --payman-v2-border-1: var(--payman-v2-border-1-override, #e5e5e5);
12
+ --payman-v2-border-2: var(--payman-v2-border-2-override, #ebebeb);
13
+ --payman-v2-code-bg: var(--payman-v2-code-bg-override, #f6f6f6);
14
+ --payman-v2-code-border: var(--payman-v2-code-border-override, #e8e8e8);
15
+ --payman-v2-btn-primary: var(--payman-v2-btn-primary-override, #0d0d0d);
16
+ --payman-v2-btn-primary-text: var(--payman-v2-btn-primary-text-override, #ffffff);
17
+ --payman-v2-btn-disabled: var(--payman-v2-btn-disabled-override, #e5e5e5);
18
+ --payman-v2-btn-disabled-text: var(--payman-v2-btn-disabled-text-override, #b4b4b4);
19
+ --payman-v2-hover: var(--payman-v2-hover-override, rgba(0, 0, 0, 0.04));
20
+ --payman-v2-shadow-input: var(--payman-v2-shadow-input-override, 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.06));
21
+ --payman-v2-shadow-input-focus: var(--payman-v2-shadow-input-focus-override, 0 1px 4px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.12));
22
+ --payman-v2-font-sans: var(--payman-v2-font-sans-override, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
23
+ --payman-v2-font-mono: var(--payman-v2-font-mono-override, ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace);
24
+ --payman-v2-body-font-size: var(--payman-v2-body-font-size-override, 15px);
25
+ --payman-v2-body-line-height: var(--payman-v2-body-line-height-override, 1.6);
26
+ --payman-v2-small-font-size: var(--payman-v2-small-font-size-override, 12px);
27
+ --payman-v2-radius-sm: var(--payman-v2-radius-sm-override, 0.5rem);
28
+ --payman-v2-radius-md: var(--payman-v2-radius-md-override, 0.75rem);
29
+ --payman-v2-radius-lg: var(--payman-v2-radius-lg-override, 1rem);
30
+ --payman-v2-radius-xl: var(--payman-v2-radius-xl-override, 1.25rem);
31
+ --payman-v2-radius-full: var(--payman-v2-radius-full-override, 9999px);
32
+ --payman-v2-radius-bubble: var(--payman-v2-radius-bubble-override, 1.5rem);
33
+ --payman-v2-radius-input: var(--payman-v2-radius-input-override, 1.5rem);
34
+ --payman-v2-max-content-width: var(--payman-v2-max-content-width-override, 48rem);
35
+ --payman-v2-send-btn-size: var(--payman-v2-send-btn-size-override, 2rem);
36
+ --payman-v2-thinking-border-color: var(--payman-v2-thinking-border-color-override, var(--payman-v2-border-1));
37
+ --payman-v2-thinking-statement-color: var(--payman-v2-thinking-statement-color-override, var(--payman-v2-text-2));
38
+ --payman-v2-thinking-detail-color: var(--payman-v2-thinking-detail-color-override, var(--payman-v2-text-3));
39
+ --payman-v2-thinking-cursor-color: var(--payman-v2-thinking-cursor-color-override, var(--payman-v2-text-3));
40
+ --payman-v2-thinking-shimmer-dim: var(--payman-v2-thinking-shimmer-dim-override, var(--payman-v2-text-4));
41
+ --payman-v2-thinking-shimmer-mid: var(--payman-v2-thinking-shimmer-mid-override, var(--payman-v2-text-3));
42
+ --payman-v2-thinking-shimmer-bright: var(--payman-v2-thinking-shimmer-bright-override, var(--payman-v2-text-1));
43
+ --payman-v2-verification-bg: var(--payman-v2-verification-bg-override, var(--payman-v2-bg-secondary));
44
+ --payman-v2-verification-border: var(--payman-v2-verification-border-override, var(--payman-v2-border-1));
45
+ --payman-v2-success-color: var(--payman-v2-success-color-override, #059669);
46
+ --payman-v2-success-bg: var(--payman-v2-success-bg-override, rgba(5, 150, 105, 0.05));
47
+ --payman-v2-success-border: var(--payman-v2-success-border-override, rgba(5, 150, 105, 0.15));
48
+ --payman-v2-error-color: var(--payman-v2-error-color-override, #ef4444);
49
+ --payman-v2-error-bg: var(--payman-v2-error-bg-override, rgba(239, 68, 68, 0.05));
50
+ --payman-v2-error-border: var(--payman-v2-error-border-override, rgba(239, 68, 68, 0.1));
51
+ font-family: var(--payman-v2-font-sans);
52
+ color: var(--payman-v2-text-1);
53
+ background: var(--payman-v2-bg);
54
+ -webkit-font-smoothing: antialiased;
55
+ -moz-osx-font-smoothing: grayscale;
56
+ }
57
+ @media (prefers-color-scheme: dark) {
58
+ .payman-v2-root:not(.payman-v2-light) {
59
+ --payman-v2-bg: var(--payman-v2-bg-override, #212121);
60
+ --payman-v2-bg-secondary: var(--payman-v2-bg-secondary-override, #2f2f2f);
61
+ --payman-v2-bg-tertiary: var(--payman-v2-bg-tertiary-override, #3a3a3a);
62
+ --payman-v2-bg-user: var(--payman-v2-bg-user-override, #303030);
63
+ --payman-v2-text-1: var(--payman-v2-text-1-override, #ececec);
64
+ --payman-v2-text-2: var(--payman-v2-text-2-override, #b4b4b4);
65
+ --payman-v2-text-3: var(--payman-v2-text-3-override, #7a7a7a);
66
+ --payman-v2-text-4: var(--payman-v2-text-4-override, #555555);
67
+ --payman-v2-border-1: var(--payman-v2-border-1-override, #3a3a3a);
68
+ --payman-v2-border-2: var(--payman-v2-border-2-override, #333333);
69
+ --payman-v2-code-bg: var(--payman-v2-code-bg-override, #2b2b2b);
70
+ --payman-v2-code-border: var(--payman-v2-code-border-override, #3a3a3a);
71
+ --payman-v2-btn-primary: var(--payman-v2-btn-primary-override, #ececec);
72
+ --payman-v2-btn-primary-text: var(--payman-v2-btn-primary-text-override, #212121);
73
+ --payman-v2-btn-disabled: var(--payman-v2-btn-disabled-override, #3a3a3a);
74
+ --payman-v2-btn-disabled-text: var(--payman-v2-btn-disabled-text-override, #666666);
75
+ --payman-v2-hover: var(--payman-v2-hover-override, rgba(255, 255, 255, 0.06));
76
+ --payman-v2-shadow-input: var(--payman-v2-shadow-input-override, 0 1px 3px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.06));
77
+ --payman-v2-shadow-input-focus: var(--payman-v2-shadow-input-focus-override, 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1));
78
+ }
79
+ }
80
+ .payman-v2-root.payman-v2-dark {
81
+ --payman-v2-bg: var(--payman-v2-bg-override, #212121);
82
+ --payman-v2-bg-secondary: var(--payman-v2-bg-secondary-override, #2f2f2f);
83
+ --payman-v2-bg-tertiary: var(--payman-v2-bg-tertiary-override, #3a3a3a);
84
+ --payman-v2-bg-user: var(--payman-v2-bg-user-override, #303030);
85
+ --payman-v2-text-1: var(--payman-v2-text-1-override, #ececec);
86
+ --payman-v2-text-2: var(--payman-v2-text-2-override, #b4b4b4);
87
+ --payman-v2-text-3: var(--payman-v2-text-3-override, #7a7a7a);
88
+ --payman-v2-text-4: var(--payman-v2-text-4-override, #555555);
89
+ --payman-v2-border-1: var(--payman-v2-border-1-override, #3a3a3a);
90
+ --payman-v2-border-2: var(--payman-v2-border-2-override, #333333);
91
+ --payman-v2-code-bg: var(--payman-v2-code-bg-override, #2b2b2b);
92
+ --payman-v2-code-border: var(--payman-v2-code-border-override, #3a3a3a);
93
+ --payman-v2-btn-primary: var(--payman-v2-btn-primary-override, #ececec);
94
+ --payman-v2-btn-primary-text: var(--payman-v2-btn-primary-text-override, #212121);
95
+ --payman-v2-btn-disabled: var(--payman-v2-btn-disabled-override, #3a3a3a);
96
+ --payman-v2-btn-disabled-text: var(--payman-v2-btn-disabled-text-override, #666666);
97
+ --payman-v2-hover: var(--payman-v2-hover-override, rgba(255, 255, 255, 0.06));
98
+ --payman-v2-shadow-input: var(--payman-v2-shadow-input-override, 0 1px 3px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.06));
99
+ --payman-v2-shadow-input-focus: var(--payman-v2-shadow-input-focus-override, 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1));
100
+ }
101
+ @keyframes payman-v2-cursor-blink {
102
+ 0%, 100% {
103
+ opacity: 1;
104
+ }
105
+ 50% {
106
+ opacity: 0;
107
+ }
108
+ }
109
+ @keyframes payman-v2-thinking-shimmer {
110
+ 0% {
111
+ background-position: 300% 0;
112
+ }
113
+ 100% {
114
+ background-position: -300% 0;
115
+ }
116
+ }
117
+ @keyframes payman-v2-fade-in {
118
+ from {
119
+ opacity: 0;
120
+ transform: translateY(4px);
121
+ }
122
+ to {
123
+ opacity: 1;
124
+ transform: translateY(0);
125
+ }
126
+ }
127
+ @keyframes payman-v2-shake {
128
+ 0%, 100% {
129
+ transform: translateX(0);
130
+ }
131
+ 20% {
132
+ transform: translateX(-6px);
133
+ }
134
+ 40% {
135
+ transform: translateX(6px);
136
+ }
137
+ 60% {
138
+ transform: translateX(-4px);
139
+ }
140
+ 80% {
141
+ transform: translateX(4px);
142
+ }
143
+ }
144
+ @keyframes payman-v2-pulse-once {
145
+ 0% {
146
+ transform: scale(1);
147
+ }
148
+ 50% {
149
+ transform: scale(1.03);
150
+ }
151
+ 100% {
152
+ transform: scale(1);
153
+ }
154
+ }
155
+ .payman-v2-fade-in {
156
+ animation: payman-v2-fade-in 0.2s ease-out both;
157
+ }
158
+ .payman-v2-shake {
159
+ animation: payman-v2-shake 0.4s ease-in-out;
160
+ }
161
+ .payman-v2-pulse-once {
162
+ animation: payman-v2-pulse-once 0.3s ease-out;
163
+ }
164
+ .payman-v2-streaming-cursor::after {
165
+ content: "\258b";
166
+ display: inline;
167
+ animation: payman-v2-cursor-blink 0.7s step-end infinite;
168
+ color: var(--payman-v2-text-3);
169
+ margin-left: 1px;
170
+ }
171
+ .payman-v2-thinking-shimmer {
172
+ background:
173
+ linear-gradient(
174
+ 90deg,
175
+ var(--payman-v2-thinking-shimmer-dim) 0%,
176
+ var(--payman-v2-thinking-shimmer-dim) 32%,
177
+ var(--payman-v2-thinking-shimmer-mid) 46%,
178
+ var(--payman-v2-thinking-shimmer-bright) 50%,
179
+ var(--payman-v2-thinking-shimmer-mid) 54%,
180
+ var(--payman-v2-thinking-shimmer-dim) 68%,
181
+ var(--payman-v2-thinking-shimmer-dim) 100%);
182
+ background-size: 280% 100%;
183
+ -webkit-background-clip: text;
184
+ -webkit-text-fill-color: transparent;
185
+ background-clip: text;
186
+ animation: payman-v2-thinking-shimmer 1.85s linear infinite;
187
+ }
188
+ .payman-v2-scrollbar::-webkit-scrollbar {
189
+ width: 6px;
190
+ }
191
+ .payman-v2-scrollbar::-webkit-scrollbar-track {
192
+ background: transparent;
193
+ }
194
+ .payman-v2-scrollbar::-webkit-scrollbar-thumb {
195
+ background: var(--payman-v2-border-1);
196
+ border-radius: 3px;
197
+ }
198
+ .payman-v2-scrollbar::-webkit-scrollbar-thumb:hover {
199
+ background: var(--payman-v2-text-4);
200
+ }
201
+ .payman-v2-scrollbar {
202
+ scrollbar-width: thin;
203
+ scrollbar-color: var(--payman-v2-border-1) transparent;
204
+ scrollbar-gutter: stable;
205
+ }
206
+ .payman-v2-root {
207
+ display: flex;
208
+ flex-direction: column;
209
+ height: 100%;
210
+ width: 100%;
211
+ overflow: hidden;
212
+ }
213
+ .payman-v2-chat-layout {
214
+ display: flex;
215
+ flex-direction: column;
216
+ flex: 1 1 0%;
217
+ min-height: 0;
218
+ }
219
+ .payman-v2-empty-state {
220
+ flex: 1 1 0%;
221
+ display: flex;
222
+ align-items: center;
223
+ justify-content: center;
224
+ padding: 1rem;
225
+ }
226
+ .payman-v2-empty-state-inner {
227
+ max-width: 28rem;
228
+ width: 100%;
229
+ text-align: center;
230
+ }
231
+ .payman-v2-empty-title {
232
+ font-size: 1.5rem;
233
+ font-weight: 600;
234
+ color: var(--payman-v2-text-1);
235
+ margin-bottom: 2rem;
236
+ }
237
+ .payman-v2-empty-suggestions {
238
+ display: flex;
239
+ flex-wrap: wrap;
240
+ justify-content: center;
241
+ gap: 0.5rem;
242
+ }
243
+ .payman-v2-empty-suggestion-btn {
244
+ padding: 0.5rem 0.875rem;
245
+ border-radius: var(--payman-v2-radius-full);
246
+ border: 1px solid var(--payman-v2-border-1);
247
+ background: transparent;
248
+ font-size: 0.875rem;
249
+ color: var(--payman-v2-text-2);
250
+ cursor: pointer;
251
+ transition: background-color 0.15s, border-color 0.15s;
252
+ font-family: inherit;
253
+ }
254
+ .payman-v2-empty-suggestion-btn:hover {
255
+ background: var(--payman-v2-hover);
256
+ }
257
+ .payman-v2-message-list {
258
+ position: relative;
259
+ flex: 1 1 0%;
260
+ min-height: 0;
261
+ }
262
+ .payman-v2-message-scroll {
263
+ height: 100%;
264
+ overflow-y: auto;
265
+ }
266
+ .payman-v2-message-scroll-inner {
267
+ max-width: var(--payman-v2-max-content-width);
268
+ margin: 0 auto;
269
+ padding: 1.5rem 1rem;
270
+ }
271
+ @media (min-width: 640px) {
272
+ .payman-v2-message-scroll-inner {
273
+ padding-left: 1.25rem;
274
+ padding-right: 1.25rem;
275
+ }
276
+ }
277
+ .payman-v2-message-scroll-inner > * + * {
278
+ margin-top: 1.5rem;
279
+ }
280
+ .payman-v2-scroll-to-bottom {
281
+ position: absolute;
282
+ bottom: 0.75rem;
283
+ left: 50%;
284
+ transform: translateX(-50%);
285
+ z-index: 20;
286
+ }
287
+ .payman-v2-scroll-to-bottom-btn {
288
+ width: 2rem;
289
+ height: 2rem;
290
+ border-radius: var(--payman-v2-radius-full);
291
+ background: var(--payman-v2-bg);
292
+ border: 1px solid var(--payman-v2-border-1);
293
+ display: flex;
294
+ align-items: center;
295
+ justify-content: center;
296
+ cursor: pointer;
297
+ transition: background-color 0.15s, transform 0.1s;
298
+ box-shadow: var(--payman-v2-shadow-input);
299
+ color: var(--payman-v2-text-3);
300
+ }
301
+ .payman-v2-scroll-to-bottom-btn:hover {
302
+ background: var(--payman-v2-bg-secondary);
303
+ }
304
+ .payman-v2-scroll-to-bottom-btn:active {
305
+ transform: scale(0.95);
306
+ }
307
+ .payman-v2-user-msg {
308
+ display: flex;
309
+ justify-content: flex-end;
310
+ width: 100%;
311
+ }
312
+ .payman-v2-user-msg-group {
313
+ display: flex;
314
+ flex-direction: column;
315
+ align-items: flex-end;
316
+ max-width: 85%;
317
+ min-width: 0;
318
+ }
319
+ .payman-v2-user-msg-attachments {
320
+ display: flex;
321
+ gap: 0.375rem;
322
+ margin-bottom: 0.375rem;
323
+ flex-wrap: wrap;
324
+ justify-content: flex-end;
325
+ }
326
+ .payman-v2-user-msg-attachment-image {
327
+ position: relative;
328
+ width: 5rem;
329
+ height: 5rem;
330
+ border-radius: 1rem;
331
+ overflow: hidden;
332
+ border: 1px solid var(--payman-v2-border-1);
333
+ cursor: pointer;
334
+ background: var(--payman-v2-bg-secondary);
335
+ }
336
+ .payman-v2-user-msg-attachment-image img {
337
+ width: 100%;
338
+ height: 100%;
339
+ -o-object-fit: cover;
340
+ object-fit: cover;
341
+ }
342
+ .payman-v2-user-msg-attachment-image-overlay {
343
+ position: absolute;
344
+ inset: 0;
345
+ background: transparent;
346
+ display: flex;
347
+ align-items: center;
348
+ justify-content: center;
349
+ transition: background-color 0.15s;
350
+ }
351
+ .payman-v2-user-msg-attachment-image:hover .payman-v2-user-msg-attachment-image-overlay {
352
+ background: rgba(0, 0, 0, 0.1);
353
+ }
354
+ .payman-v2-user-msg-attachment-image-overlay-icon {
355
+ opacity: 0;
356
+ background: rgba(0, 0, 0, 0.5);
357
+ backdrop-filter: blur(4px);
358
+ border-radius: var(--payman-v2-radius-full);
359
+ padding: 0.25rem;
360
+ transition: opacity 0.15s;
361
+ }
362
+ .payman-v2-user-msg-attachment-image:hover .payman-v2-user-msg-attachment-image-overlay-icon {
363
+ opacity: 1;
364
+ }
365
+ .payman-v2-user-msg-attachment-file {
366
+ display: flex;
367
+ align-items: center;
368
+ gap: 0.5rem;
369
+ padding: 0.5rem 0.75rem;
370
+ border-radius: 1rem;
371
+ border: 1px solid var(--payman-v2-border-1);
372
+ background: var(--payman-v2-bg-secondary);
373
+ }
374
+ .payman-v2-user-msg-attachment-file-name {
375
+ font-size: 0.75rem;
376
+ color: var(--payman-v2-text-2);
377
+ max-width: 100px;
378
+ overflow: hidden;
379
+ text-overflow: ellipsis;
380
+ white-space: nowrap;
381
+ }
382
+ .payman-v2-user-msg-bubble {
383
+ border-radius: var(--payman-v2-radius-bubble);
384
+ padding: 0.75rem 1.25rem;
385
+ background: var(--payman-v2-bg-user);
386
+ }
387
+ .payman-v2-user-msg-text {
388
+ font-size: var(--payman-v2-body-font-size);
389
+ line-height: var(--payman-v2-body-line-height);
390
+ color: var(--payman-v2-text-1);
391
+ white-space: pre-wrap;
392
+ word-break: break-word;
393
+ margin: 0;
394
+ }
395
+ .payman-v2-user-msg-error {
396
+ margin-top: 0.5rem;
397
+ display: flex;
398
+ align-items: flex-start;
399
+ gap: 0.5rem;
400
+ border-radius: 1rem;
401
+ border: 1px solid var(--payman-v2-error-border);
402
+ background: var(--payman-v2-error-bg);
403
+ padding: 0.5rem 0.75rem;
404
+ }
405
+ .payman-v2-user-msg-error-text {
406
+ font-size: 0.75rem;
407
+ line-height: 1.625;
408
+ color: var(--payman-v2-error-color);
409
+ white-space: nowrap;
410
+ margin: 0;
411
+ }
412
+ .payman-v2-user-msg-actions {
413
+ margin-top: 0.375rem;
414
+ display: flex;
415
+ align-items: center;
416
+ justify-content: flex-end;
417
+ gap: 0.375rem;
418
+ opacity: 0;
419
+ transform: translateY(4px);
420
+ pointer-events: none;
421
+ transition: opacity 0.15s, transform 0.15s;
422
+ }
423
+ .payman-v2-user-msg-group:hover .payman-v2-user-msg-actions {
424
+ opacity: 1;
425
+ transform: translateY(0);
426
+ pointer-events: auto;
427
+ }
428
+ .payman-v2-user-msg-timestamp {
429
+ font-size: 11px;
430
+ color: var(--payman-v2-text-4);
431
+ font-variant-numeric: tabular-nums;
432
+ }
433
+ .payman-v2-user-msg-action-btn {
434
+ display: inline-flex;
435
+ height: 1.75rem;
436
+ width: 1.75rem;
437
+ align-items: center;
438
+ justify-content: center;
439
+ border-radius: var(--payman-v2-radius-sm);
440
+ border: 1px solid transparent;
441
+ color: var(--payman-v2-text-3);
442
+ background: transparent;
443
+ cursor: pointer;
444
+ transition: all 0.15s;
445
+ }
446
+ .payman-v2-user-msg-action-btn:hover {
447
+ border-color: var(--payman-v2-border-1);
448
+ background: var(--payman-v2-bg);
449
+ color: var(--payman-v2-text-2);
450
+ }
451
+ .payman-v2-user-msg-action-btn:disabled {
452
+ cursor: not-allowed;
453
+ opacity: 0.4;
454
+ }
455
+ .payman-v2-assistant-msg {
456
+ display: flex;
457
+ flex-direction: column;
458
+ align-items: flex-start;
459
+ width: 100%;
460
+ }
461
+ .payman-v2-assistant-msg-thinking-only {
462
+ font-size: var(--payman-v2-body-font-size);
463
+ color: var(--payman-v2-text-3);
464
+ }
465
+ .payman-v2-assistant-msg-slow {
466
+ font-size: 0.75rem;
467
+ color: var(--payman-v2-text-3);
468
+ margin-top: 0.5rem;
469
+ display: flex;
470
+ align-items: center;
471
+ gap: 0.25rem;
472
+ }
473
+ .payman-v2-assistant-msg-error {
474
+ display: flex;
475
+ align-items: flex-start;
476
+ gap: 0.625rem;
477
+ padding: 0.75rem 1rem;
478
+ border-radius: var(--payman-v2-radius-xl);
479
+ background: var(--payman-v2-error-bg);
480
+ border: 1px solid var(--payman-v2-error-border);
481
+ max-width: 24rem;
482
+ }
483
+ .payman-v2-assistant-msg-error-icon {
484
+ color: rgba(239, 68, 68, 0.7);
485
+ flex-shrink: 0;
486
+ margin-top: 2px;
487
+ }
488
+ .payman-v2-assistant-msg-error-text {
489
+ font-size: 0.875rem;
490
+ color: var(--payman-v2-text-1);
491
+ line-height: 1.625;
492
+ margin: 0;
493
+ }
494
+ .payman-v2-assistant-msg-retry-btn {
495
+ display: inline-flex;
496
+ align-items: center;
497
+ gap: 0.375rem;
498
+ margin-top: 0.5rem;
499
+ font-size: 0.75rem;
500
+ font-weight: 500;
501
+ color: var(--payman-v2-text-2);
502
+ background: transparent;
503
+ border: none;
504
+ cursor: pointer;
505
+ padding: 0;
506
+ font-family: inherit;
507
+ transition: color 0.15s;
508
+ }
509
+ .payman-v2-assistant-msg-retry-btn:hover {
510
+ color: var(--payman-v2-text-1);
511
+ }
512
+ .payman-v2-assistant-msg-retry-btn:disabled {
513
+ cursor: not-allowed;
514
+ opacity: 0.4;
515
+ }
516
+ .payman-v2-assistant-msg-retry-btn:disabled:hover {
517
+ color: var(--payman-v2-text-2);
518
+ }
519
+ .payman-v2-assistant-msg-content-area {
520
+ width: 100%;
521
+ transition: min-height 0.3s ease-out;
522
+ }
523
+ .payman-v2-assistant-msg-placeholder {
524
+ font-size: var(--payman-v2-body-font-size);
525
+ color: var(--payman-v2-text-3);
526
+ }
527
+ .payman-v2-assistant-msg-paused {
528
+ display: flex;
529
+ align-items: center;
530
+ gap: 0.5rem;
531
+ margin-top: 0.5rem;
532
+ padding: 0.5rem 0.75rem;
533
+ border-radius: var(--payman-v2-radius-sm);
534
+ background: rgba(245, 158, 11, 0.05);
535
+ border: 1px solid rgba(245, 158, 11, 0.1);
536
+ max-width: 16rem;
537
+ }
538
+ .payman-v2-assistant-msg-paused-text {
539
+ font-size: 0.75rem;
540
+ color: var(--payman-v2-text-2);
541
+ margin: 0;
542
+ }
543
+ .payman-v2-assistant-msg-partial-error {
544
+ display: flex;
545
+ align-items: flex-start;
546
+ gap: 0.625rem;
547
+ margin-top: 0.75rem;
548
+ padding: 0.75rem 1rem;
549
+ border-radius: var(--payman-v2-radius-xl);
550
+ background: var(--payman-v2-error-bg);
551
+ border: 1px solid var(--payman-v2-error-border);
552
+ max-width: 24rem;
553
+ }
554
+ .payman-v2-assistant-msg-actions {
555
+ display: flex;
556
+ align-items: center;
557
+ gap: 0.25rem;
558
+ margin-top: 0.5rem;
559
+ margin-left: -0.375rem;
560
+ }
561
+ .payman-v2-assistant-msg-action-btn {
562
+ padding: 0.375rem;
563
+ border-radius: var(--payman-v2-radius-sm);
564
+ border: 1px solid transparent;
565
+ background: transparent;
566
+ cursor: pointer;
567
+ transition: all 0.2s;
568
+ color: var(--payman-v2-text-3);
569
+ display: inline-flex;
570
+ align-items: center;
571
+ justify-content: center;
572
+ }
573
+ .payman-v2-assistant-msg-action-btn:hover {
574
+ background: var(--payman-v2-hover);
575
+ color: var(--payman-v2-text-2);
576
+ }
577
+ .payman-v2-assistant-msg-action-btn:disabled {
578
+ cursor: not-allowed;
579
+ opacity: 0.4;
580
+ }
581
+ .payman-v2-assistant-msg-action-btn-active {
582
+ border-color: var(--payman-v2-border-1);
583
+ background: var(--payman-v2-bg-secondary);
584
+ color: var(--payman-v2-text-1);
585
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
586
+ }
587
+ .payman-v2-thinking {
588
+ margin-bottom: 0.75rem;
589
+ }
590
+ .payman-v2-thinking-toggle {
591
+ display: flex;
592
+ align-items: center;
593
+ gap: 0.25rem;
594
+ font-size: 0.75rem;
595
+ color: var(--payman-v2-text-3);
596
+ background: transparent;
597
+ border: none;
598
+ cursor: pointer;
599
+ padding: 0;
600
+ -webkit-user-select: none;
601
+ -moz-user-select: none;
602
+ user-select: none;
603
+ font-family: inherit;
604
+ transition: color 0.15s;
605
+ }
606
+ .payman-v2-thinking-toggle:hover {
607
+ color: var(--payman-v2-text-2);
608
+ }
609
+ .payman-v2-thinking-chevron {
610
+ width: 0.875rem;
611
+ height: 0.875rem;
612
+ transition: transform 0.15s;
613
+ flex-shrink: 0;
614
+ }
615
+ .payman-v2-thinking-chevron-open {
616
+ transform: rotate(90deg);
617
+ }
618
+ .payman-v2-thinking-content {
619
+ overflow: hidden;
620
+ }
621
+ .payman-v2-thinking-border {
622
+ margin-top: 0.375rem;
623
+ margin-left: 0.25rem;
624
+ padding-left: 0.75rem;
625
+ border-left: 1px solid var(--payman-v2-thinking-border-color);
626
+ }
627
+ .payman-v2-thinking-border > * + * {
628
+ margin-top: 0.375rem;
629
+ }
630
+ .payman-v2-thinking-statement {
631
+ font-size: var(--payman-v2-small-font-size);
632
+ font-weight: 500;
633
+ color: var(--payman-v2-thinking-statement-color);
634
+ margin: 0;
635
+ }
636
+ .payman-v2-thinking-statement:not(:first-child) {
637
+ margin-top: 0.25rem;
638
+ }
639
+ .payman-v2-thinking-detail {
640
+ font-size: var(--payman-v2-small-font-size);
641
+ line-height: 1.6;
642
+ color: var(--payman-v2-thinking-detail-color);
643
+ margin: 0;
644
+ }
645
+ .payman-v2-thinking-status {
646
+ display: inline-flex;
647
+ align-items: center;
648
+ border-radius: var(--payman-v2-radius-full);
649
+ padding: 0.25rem 0.625rem;
650
+ font-size: 11px;
651
+ font-weight: 500;
652
+ }
653
+ .payman-v2-thinking-status-success {
654
+ border: 1px solid var(--payman-v2-success-border);
655
+ background: var(--payman-v2-success-bg);
656
+ color: var(--payman-v2-success-color);
657
+ }
658
+ .payman-v2-thinking-status-error {
659
+ border: 1px solid var(--payman-v2-error-border);
660
+ background: var(--payman-v2-error-bg);
661
+ color: var(--payman-v2-error-color);
662
+ }
663
+ .payman-v2-thinking-cursor {
664
+ display: flex;
665
+ align-items: center;
666
+ gap: 0.375rem;
667
+ margin-top: 0.25rem;
668
+ height: 18px;
669
+ }
670
+ .payman-v2-thinking-cursor-bar {
671
+ display: inline-block;
672
+ width: 5px;
673
+ height: 12px;
674
+ background: var(--payman-v2-thinking-cursor-color);
675
+ border-radius: 2px;
676
+ flex-shrink: 0;
677
+ animation: payman-v2-cursor-blink 1s ease-in-out infinite;
678
+ }
679
+ .payman-v2-thinking-cursor-label {
680
+ font-size: var(--payman-v2-small-font-size);
681
+ color: var(--payman-v2-thinking-detail-color);
682
+ -webkit-user-select: none;
683
+ -moz-user-select: none;
684
+ user-select: none;
685
+ }
686
+ .payman-v2-markdown p {
687
+ margin-bottom: 1rem;
688
+ font-size: var(--payman-v2-body-font-size);
689
+ line-height: 1.75;
690
+ color: var(--payman-v2-text-1);
691
+ }
692
+ .payman-v2-markdown p:last-child {
693
+ margin-bottom: 0;
694
+ }
695
+ .payman-v2-markdown code {
696
+ padding: 1px 4px;
697
+ border-radius: 4px;
698
+ background: var(--payman-v2-code-bg);
699
+ font-size: var(--payman-v2-small-font-size);
700
+ font-family: var(--payman-v2-font-mono);
701
+ color: var(--payman-v2-text-1);
702
+ word-break: break-all;
703
+ }
704
+ .payman-v2-markdown-pre {
705
+ margin: 0.5rem 0;
706
+ border-radius: var(--payman-v2-radius-sm);
707
+ background: var(--payman-v2-code-bg);
708
+ border: 1px solid var(--payman-v2-code-border);
709
+ padding: 0.625rem;
710
+ overflow-x: auto;
711
+ }
712
+ .payman-v2-markdown-pre pre {
713
+ font-size: var(--payman-v2-small-font-size);
714
+ font-family: var(--payman-v2-font-mono);
715
+ color: var(--payman-v2-text-1);
716
+ line-height: 1.4;
717
+ margin: 0;
718
+ }
719
+ .payman-v2-markdown ul {
720
+ margin-bottom: 1rem;
721
+ margin-left: 1.5rem;
722
+ list-style-type: disc;
723
+ font-size: var(--payman-v2-body-font-size);
724
+ }
725
+ .payman-v2-markdown ul > li + li {
726
+ margin-top: 0.25rem;
727
+ }
728
+ .payman-v2-markdown ol {
729
+ margin-bottom: 1rem;
730
+ margin-left: 1.5rem;
731
+ list-style-type: decimal;
732
+ font-size: var(--payman-v2-body-font-size);
733
+ }
734
+ .payman-v2-markdown ol > li + li {
735
+ margin-top: 0.25rem;
736
+ }
737
+ .payman-v2-markdown li {
738
+ font-size: var(--payman-v2-body-font-size);
739
+ line-height: 1.75;
740
+ color: var(--payman-v2-text-1);
741
+ padding-left: 0.25rem;
742
+ }
743
+ .payman-v2-markdown h1 {
744
+ font-size: 1.25rem;
745
+ font-weight: 600;
746
+ color: var(--payman-v2-text-1);
747
+ margin-top: 1.5rem;
748
+ margin-bottom: 0.75rem;
749
+ }
750
+ .payman-v2-markdown h1:first-child {
751
+ margin-top: 0;
752
+ }
753
+ .payman-v2-markdown h2 {
754
+ font-size: 1.125rem;
755
+ font-weight: 600;
756
+ color: var(--payman-v2-text-1);
757
+ margin-top: 1.5rem;
758
+ margin-bottom: 0.75rem;
759
+ }
760
+ .payman-v2-markdown h2:first-child {
761
+ margin-top: 0;
762
+ }
763
+ .payman-v2-markdown h3 {
764
+ font-size: 1rem;
765
+ font-weight: 600;
766
+ color: var(--payman-v2-text-1);
767
+ margin-top: 1.25rem;
768
+ margin-bottom: 0.5rem;
769
+ }
770
+ .payman-v2-markdown h3:first-child {
771
+ margin-top: 0;
772
+ }
773
+ .payman-v2-markdown strong {
774
+ font-weight: 600;
775
+ color: var(--payman-v2-text-1);
776
+ }
777
+ .payman-v2-markdown em {
778
+ font-style: italic;
779
+ }
780
+ .payman-v2-markdown blockquote {
781
+ margin: 1rem 0;
782
+ padding-left: 1rem;
783
+ border-left: 2px solid var(--payman-v2-border-1);
784
+ color: var(--payman-v2-text-2);
785
+ font-style: italic;
786
+ }
787
+ .payman-v2-markdown hr {
788
+ margin: 1.5rem 0;
789
+ border: none;
790
+ border-top: 1px solid var(--payman-v2-border-2);
791
+ }
792
+ .payman-v2-markdown a {
793
+ color: var(--payman-v2-text-1);
794
+ text-decoration: underline;
795
+ text-decoration-color: var(--payman-v2-text-3);
796
+ text-underline-offset: 2px;
797
+ transition: text-decoration-color 0.15s;
798
+ }
799
+ .payman-v2-markdown a:hover {
800
+ text-decoration-color: var(--payman-v2-text-2);
801
+ }
802
+ .payman-v2-markdown-table-wrapper {
803
+ margin: 1rem 0;
804
+ width: 100%;
805
+ overflow-x: auto;
806
+ border-radius: var(--payman-v2-radius-xl);
807
+ border: 1px solid var(--payman-v2-code-border);
808
+ }
809
+ .payman-v2-markdown-table {
810
+ min-width: 100%;
811
+ font-size: 0.875rem;
812
+ border-collapse: collapse;
813
+ }
814
+ .payman-v2-markdown-thead {
815
+ background: var(--payman-v2-code-bg);
816
+ border-bottom: 1px solid var(--payman-v2-code-border);
817
+ }
818
+ .payman-v2-markdown-tbody tr + tr {
819
+ border-top: 1px solid var(--payman-v2-code-border);
820
+ }
821
+ .payman-v2-markdown-th {
822
+ padding: 0.75rem 1rem;
823
+ text-align: left;
824
+ font-size: 0.75rem;
825
+ font-weight: 600;
826
+ color: var(--payman-v2-text-2);
827
+ white-space: nowrap;
828
+ }
829
+ .payman-v2-markdown-td {
830
+ padding: 0.75rem 1rem;
831
+ font-size: 0.875rem;
832
+ color: var(--payman-v2-text-1);
833
+ white-space: nowrap;
834
+ }
835
+ .payman-v2-input-container {
836
+ width: 100%;
837
+ max-width: var(--payman-v2-max-content-width);
838
+ margin: 0 auto;
839
+ padding: 0.5rem 1rem 0.75rem;
840
+ }
841
+ @media (min-width: 640px) {
842
+ .payman-v2-input-container {
843
+ padding-left: 1.25rem;
844
+ padding-right: 1.25rem;
845
+ }
846
+ }
847
+ .payman-v2-input-wrapper {
848
+ position: relative;
849
+ border-radius: var(--payman-v2-radius-input);
850
+ transition: box-shadow 0.2s;
851
+ box-shadow: var(--payman-v2-shadow-input);
852
+ }
853
+ .payman-v2-input-wrapper-focused {
854
+ box-shadow: var(--payman-v2-shadow-input-focus);
855
+ }
856
+ .payman-v2-input-body {
857
+ padding: 0.75rem 1rem 0;
858
+ }
859
+ .payman-v2-input-editing-banner {
860
+ margin-bottom: 0.5rem;
861
+ display: flex;
862
+ align-items: center;
863
+ justify-content: space-between;
864
+ gap: 0.5rem;
865
+ border-radius: var(--payman-v2-radius-xl);
866
+ border: 1px solid var(--payman-v2-border-1);
867
+ background: var(--payman-v2-bg-secondary);
868
+ padding: 0.375rem 0.625rem;
869
+ }
870
+ .payman-v2-input-editing-banner-info {
871
+ display: flex;
872
+ align-items: center;
873
+ gap: 0.5rem;
874
+ min-width: 0;
875
+ }
876
+ .payman-v2-input-editing-icon-wrap {
877
+ display: flex;
878
+ height: 1.25rem;
879
+ width: 1.25rem;
880
+ align-items: center;
881
+ justify-content: center;
882
+ border-radius: var(--payman-v2-radius-full);
883
+ background: var(--payman-v2-bg);
884
+ }
885
+ .payman-v2-input-editing-label {
886
+ font-size: 0.75rem;
887
+ color: var(--payman-v2-text-2);
888
+ min-width: 0;
889
+ margin: 0;
890
+ }
891
+ .payman-v2-input-editing-close {
892
+ display: flex;
893
+ height: 1.5rem;
894
+ width: 1.5rem;
895
+ align-items: center;
896
+ justify-content: center;
897
+ border-radius: var(--payman-v2-radius-full);
898
+ border: none;
899
+ background: transparent;
900
+ color: var(--payman-v2-text-3);
901
+ cursor: pointer;
902
+ transition: background-color 0.15s, color 0.15s;
903
+ }
904
+ .payman-v2-input-editing-close:hover {
905
+ background: var(--payman-v2-bg);
906
+ color: var(--payman-v2-text-2);
907
+ }
908
+ .payman-v2-input-textarea {
909
+ width: 100%;
910
+ resize: none;
911
+ background: transparent;
912
+ font-size: var(--payman-v2-body-font-size);
913
+ color: var(--payman-v2-text-1);
914
+ line-height: 1.5;
915
+ border: none;
916
+ outline: none;
917
+ font-family: var(--payman-v2-font-sans);
918
+ scrollbar-width: thin;
919
+ scrollbar-color: var(--payman-v2-border-1) transparent;
920
+ }
921
+ .payman-v2-input-textarea::-moz-placeholder {
922
+ color: var(--payman-v2-text-4);
923
+ }
924
+ .payman-v2-input-textarea::placeholder {
925
+ color: var(--payman-v2-text-4);
926
+ }
927
+ .payman-v2-input-textarea::-webkit-scrollbar {
928
+ width: 6px;
929
+ }
930
+ .payman-v2-input-textarea::-webkit-scrollbar-track {
931
+ background: transparent;
932
+ }
933
+ .payman-v2-input-textarea::-webkit-scrollbar-thumb {
934
+ background: var(--payman-v2-border-1);
935
+ border-radius: 3px;
936
+ }
937
+ .payman-v2-input-controls {
938
+ display: flex;
939
+ align-items: center;
940
+ justify-content: space-between;
941
+ padding: 0.125rem 0.75rem 0.625rem;
942
+ }
943
+ .payman-v2-input-controls-left {
944
+ display: flex;
945
+ align-items: center;
946
+ gap: 0.125rem;
947
+ }
948
+ .payman-v2-input-controls-right {
949
+ display: flex;
950
+ align-items: center;
951
+ gap: 0.5rem;
952
+ }
953
+ .payman-v2-input-new-session-btn {
954
+ position: relative;
955
+ padding: 0.375rem;
956
+ border-radius: var(--payman-v2-radius-full);
957
+ border: none;
958
+ background: transparent;
959
+ cursor: pointer;
960
+ transition:
961
+ color 0.15s,
962
+ background-color 0.15s,
963
+ transform 0.15s;
964
+ color: var(--payman-v2-text-3);
965
+ display: inline-flex;
966
+ align-items: center;
967
+ justify-content: center;
968
+ }
969
+ .payman-v2-input-new-session-btn:hover:not(:disabled) {
970
+ background: var(--payman-v2-hover);
971
+ color: var(--payman-v2-text-2);
972
+ }
973
+ .payman-v2-input-new-session-btn:active:not(:disabled) {
974
+ transform: scale(0.95);
975
+ }
976
+ .payman-v2-input-new-session-btn:disabled {
977
+ opacity: 0.4;
978
+ cursor: not-allowed;
979
+ }
980
+ .payman-v2-input-new-session-tooltip {
981
+ pointer-events: none;
982
+ position: absolute;
983
+ bottom: calc(100% + 0.5rem);
984
+ left: 50%;
985
+ transform: translateX(-50%) translateY(4px);
986
+ opacity: 0;
987
+ border-radius: var(--payman-v2-radius-full);
988
+ background: var(--payman-v2-bg-secondary);
989
+ color: var(--payman-v2-text-2);
990
+ box-shadow: var(--payman-v2-shadow-input);
991
+ font-size: 11px;
992
+ font-weight: 500;
993
+ line-height: 1;
994
+ padding: 0.5rem 0.625rem;
995
+ white-space: nowrap;
996
+ transition: opacity 0.15s, transform 0.15s;
997
+ z-index: 20;
998
+ }
999
+ .payman-v2-input-new-session-tooltip::before {
1000
+ content: "";
1001
+ position: absolute;
1002
+ top: 100%;
1003
+ left: 50%;
1004
+ transform: translateX(-50%);
1005
+ width: 0;
1006
+ height: 0;
1007
+ border-left: 6px solid transparent;
1008
+ border-right: 6px solid transparent;
1009
+ border-top: 7px solid var(--payman-v2-bg-secondary);
1010
+ }
1011
+ .payman-v2-input-new-session-btn:hover:not(:disabled) .payman-v2-input-new-session-tooltip,
1012
+ .payman-v2-input-new-session-btn:focus-visible:not(:disabled) .payman-v2-input-new-session-tooltip {
1013
+ opacity: 1;
1014
+ transform: translateX(-50%) translateY(0);
1015
+ }
1016
+ .payman-v2-input-attach-btn {
1017
+ padding: 0.375rem;
1018
+ border-radius: var(--payman-v2-radius-full);
1019
+ border: none;
1020
+ background: transparent;
1021
+ cursor: pointer;
1022
+ transition: all 0.15s;
1023
+ color: var(--payman-v2-text-3);
1024
+ display: inline-flex;
1025
+ align-items: center;
1026
+ justify-content: center;
1027
+ }
1028
+ .payman-v2-input-attach-btn:hover {
1029
+ background: var(--payman-v2-hover);
1030
+ color: var(--payman-v2-text-2);
1031
+ }
1032
+ .payman-v2-input-attach-btn-active {
1033
+ background: var(--payman-v2-bg-tertiary);
1034
+ color: var(--payman-v2-text-2);
1035
+ transform: rotate(45deg);
1036
+ }
1037
+ .payman-v2-input-attach-btn:disabled {
1038
+ opacity: 0.4;
1039
+ cursor: not-allowed;
1040
+ }
1041
+ .payman-v2-input-attach-menu {
1042
+ position: absolute;
1043
+ bottom: 100%;
1044
+ left: 0;
1045
+ margin-bottom: 0.5rem;
1046
+ background: var(--payman-v2-bg);
1047
+ border: 1px solid var(--payman-v2-border-1);
1048
+ border-radius: var(--payman-v2-radius-xl);
1049
+ box-shadow: var(--payman-v2-shadow-input);
1050
+ overflow: hidden;
1051
+ z-index: 10;
1052
+ }
1053
+ .payman-v2-input-attach-option {
1054
+ display: flex;
1055
+ align-items: center;
1056
+ gap: 0.625rem;
1057
+ padding: 0.625rem 1rem;
1058
+ width: 100%;
1059
+ text-align: left;
1060
+ font-size: 0.875rem;
1061
+ color: var(--payman-v2-text-2);
1062
+ background: transparent;
1063
+ border: none;
1064
+ cursor: pointer;
1065
+ transition: background-color 0.15s;
1066
+ white-space: nowrap;
1067
+ font-family: inherit;
1068
+ }
1069
+ .payman-v2-input-attach-option:hover {
1070
+ background: var(--payman-v2-hover);
1071
+ }
1072
+ .payman-v2-input-attach-option-icon {
1073
+ color: var(--payman-v2-text-3);
1074
+ }
1075
+ .payman-v2-input-mic-btn {
1076
+ position: relative;
1077
+ padding: 0.375rem;
1078
+ border-radius: var(--payman-v2-radius-full);
1079
+ border: none;
1080
+ background: transparent;
1081
+ cursor: pointer;
1082
+ transition: color 0.15s, background-color 0.15s;
1083
+ color: var(--payman-v2-text-3);
1084
+ display: inline-flex;
1085
+ align-items: center;
1086
+ justify-content: center;
1087
+ }
1088
+ .payman-v2-input-mic-btn:hover {
1089
+ color: var(--payman-v2-text-2);
1090
+ background: var(--payman-v2-hover);
1091
+ }
1092
+ .payman-v2-input-mic-btn:disabled {
1093
+ opacity: 0.4;
1094
+ cursor: not-allowed;
1095
+ }
1096
+ .payman-v2-input-mic-recording {
1097
+ color: var(--payman-v2-error-color);
1098
+ }
1099
+ .payman-v2-input-mic-recording:hover {
1100
+ background: rgba(239, 68, 68, 0.1);
1101
+ }
1102
+ .payman-v2-input-mic-indicator {
1103
+ position: absolute;
1104
+ top: 2px;
1105
+ right: 2px;
1106
+ height: 6px;
1107
+ width: 6px;
1108
+ border-radius: var(--payman-v2-radius-full);
1109
+ background: var(--payman-v2-error-color);
1110
+ }
1111
+ .payman-v2-input-voice-tooltip {
1112
+ pointer-events: none;
1113
+ position: absolute;
1114
+ bottom: 100%;
1115
+ left: 50%;
1116
+ transform: translateX(-50%);
1117
+ z-index: 20;
1118
+ margin-bottom: 0.5rem;
1119
+ }
1120
+ .payman-v2-input-voice-tooltip-content {
1121
+ position: relative;
1122
+ border-radius: var(--payman-v2-radius-full);
1123
+ background: var(--payman-v2-bg-secondary);
1124
+ padding: 0.375rem 0.75rem;
1125
+ font-size: 11px;
1126
+ font-weight: 500;
1127
+ color: var(--payman-v2-text-2);
1128
+ box-shadow: var(--payman-v2-shadow-input);
1129
+ white-space: nowrap;
1130
+ }
1131
+ .payman-v2-input-voice-tooltip-arrow {
1132
+ position: absolute;
1133
+ left: 50%;
1134
+ top: 100%;
1135
+ transform: translateX(-50%);
1136
+ width: 0;
1137
+ height: 0;
1138
+ border-left: 6px solid transparent;
1139
+ border-right: 6px solid transparent;
1140
+ border-top: 7px solid var(--payman-v2-bg-secondary);
1141
+ }
1142
+ .payman-v2-input-send-btn {
1143
+ width: var(--payman-v2-send-btn-size);
1144
+ height: var(--payman-v2-send-btn-size);
1145
+ border-radius: var(--payman-v2-radius-full);
1146
+ border: none;
1147
+ display: flex;
1148
+ align-items: center;
1149
+ justify-content: center;
1150
+ transition: all 0.15s;
1151
+ cursor: pointer;
1152
+ background: var(--payman-v2-btn-primary);
1153
+ }
1154
+ .payman-v2-input-send-btn:hover {
1155
+ opacity: 0.8;
1156
+ }
1157
+ .payman-v2-input-send-btn:active {
1158
+ transform: scale(0.95);
1159
+ }
1160
+ .payman-v2-input-send-icon {
1161
+ color: var(--payman-v2-btn-primary-text);
1162
+ }
1163
+ .payman-v2-input-send-btn-disabled {
1164
+ background: var(--payman-v2-btn-disabled);
1165
+ cursor: not-allowed;
1166
+ }
1167
+ .payman-v2-input-send-btn-disabled:hover {
1168
+ opacity: 1;
1169
+ }
1170
+ .payman-v2-input-send-btn-disabled .payman-v2-input-send-icon {
1171
+ color: var(--payman-v2-btn-disabled-text);
1172
+ }
1173
+ .payman-v2-input-disclaimer {
1174
+ text-align: center;
1175
+ font-size: 11px;
1176
+ color: var(--payman-v2-text-4);
1177
+ margin-top: 0.5rem;
1178
+ -webkit-user-select: none;
1179
+ -moz-user-select: none;
1180
+ user-select: none;
1181
+ }
1182
+ .payman-v2-input-file-input {
1183
+ display: none;
1184
+ }
1185
+ .payman-v2-verification {
1186
+ max-width: 17.5rem;
1187
+ }
1188
+ .payman-v2-verification-card {
1189
+ border-radius: var(--payman-v2-radius-xl);
1190
+ border: 1px solid var(--payman-v2-verification-border);
1191
+ background: var(--payman-v2-verification-bg);
1192
+ overflow: hidden;
1193
+ }
1194
+ .payman-v2-verification-header {
1195
+ padding: 0.875rem 1rem 0.75rem;
1196
+ }
1197
+ .payman-v2-verification-header-row {
1198
+ display: flex;
1199
+ align-items: center;
1200
+ gap: 0.5rem;
1201
+ margin-bottom: 0.5rem;
1202
+ }
1203
+ .payman-v2-verification-icon {
1204
+ color: var(--payman-v2-text-3);
1205
+ flex-shrink: 0;
1206
+ }
1207
+ .payman-v2-verification-title {
1208
+ font-size: 0.75rem;
1209
+ font-weight: 500;
1210
+ color: var(--payman-v2-text-1);
1211
+ margin: 0;
1212
+ }
1213
+ .payman-v2-verification-amount {
1214
+ margin-left: auto;
1215
+ font-size: 0.875rem;
1216
+ font-weight: 600;
1217
+ color: var(--payman-v2-text-1);
1218
+ font-variant-numeric: tabular-nums;
1219
+ }
1220
+ .payman-v2-verification-payee {
1221
+ margin-left: auto;
1222
+ font-size: 0.75rem;
1223
+ font-weight: 500;
1224
+ color: var(--payman-v2-text-2);
1225
+ overflow: hidden;
1226
+ text-overflow: ellipsis;
1227
+ white-space: nowrap;
1228
+ max-width: 120px;
1229
+ }
1230
+ .payman-v2-verification-description {
1231
+ font-size: 11px;
1232
+ color: var(--payman-v2-text-3);
1233
+ line-height: 1.4;
1234
+ margin: 0 0 0.75rem;
1235
+ }
1236
+ .payman-v2-verification-submitting {
1237
+ display: flex;
1238
+ align-items: center;
1239
+ justify-content: center;
1240
+ gap: 0.375rem;
1241
+ margin-top: 0.5rem;
1242
+ }
1243
+ .payman-v2-verification-submitting-text {
1244
+ font-size: 11px;
1245
+ color: var(--payman-v2-text-3);
1246
+ }
1247
+ .payman-v2-verification-actions {
1248
+ display: flex;
1249
+ align-items: center;
1250
+ border-top: 1px solid var(--payman-v2-verification-border);
1251
+ }
1252
+ .payman-v2-verification-resend-btn,
1253
+ .payman-v2-verification-cancel-btn {
1254
+ flex: 1;
1255
+ display: flex;
1256
+ align-items: center;
1257
+ justify-content: center;
1258
+ gap: 0.25rem;
1259
+ padding: 0.5rem;
1260
+ font-size: 11px;
1261
+ font-weight: 500;
1262
+ background: transparent;
1263
+ border: none;
1264
+ cursor: pointer;
1265
+ transition: color 0.15s, background-color 0.15s;
1266
+ font-family: inherit;
1267
+ }
1268
+ .payman-v2-verification-resend-btn {
1269
+ color: var(--payman-v2-text-3);
1270
+ border-right: 1px solid var(--payman-v2-verification-border);
1271
+ }
1272
+ .payman-v2-verification-resend-btn:hover {
1273
+ color: var(--payman-v2-text-2);
1274
+ background: var(--payman-v2-hover);
1275
+ }
1276
+ .payman-v2-verification-cancel-btn {
1277
+ color: rgba(239, 68, 68, 0.7);
1278
+ }
1279
+ .payman-v2-verification-cancel-btn:hover {
1280
+ color: var(--payman-v2-error-color);
1281
+ background: var(--payman-v2-error-bg);
1282
+ }
1283
+ .payman-v2-verification-resend-btn:disabled,
1284
+ .payman-v2-verification-cancel-btn:disabled {
1285
+ opacity: 0.4;
1286
+ cursor: not-allowed;
1287
+ }
1288
+ .payman-v2-otp {
1289
+ display: flex;
1290
+ justify-content: center;
1291
+ gap: 0.375rem;
1292
+ }
1293
+ .payman-v2-otp-digit {
1294
+ width: 2rem;
1295
+ height: 2.25rem;
1296
+ text-align: center;
1297
+ font-size: 1rem;
1298
+ font-weight: 600;
1299
+ border-radius: var(--payman-v2-radius-sm);
1300
+ background: var(--payman-v2-bg);
1301
+ border: 1px solid var(--payman-v2-border-1);
1302
+ color: var(--payman-v2-text-1);
1303
+ outline: none;
1304
+ transition: all 0.15s;
1305
+ cursor: text;
1306
+ font-family: inherit;
1307
+ }
1308
+ .payman-v2-otp-digit:focus {
1309
+ border-color: var(--payman-v2-btn-primary);
1310
+ box-shadow: 0 0 0 1px rgba(13, 13, 13, 0.2);
1311
+ }
1312
+ .payman-v2-otp-digit-filled {
1313
+ border-color: rgba(13, 13, 13, 0.4);
1314
+ }
1315
+ .payman-v2-otp-digit-error {
1316
+ border-color: var(--payman-v2-error-color);
1317
+ background: var(--payman-v2-error-bg);
1318
+ }
1319
+ .payman-v2-otp-digit:disabled {
1320
+ opacity: 0.5;
1321
+ cursor: not-allowed;
1322
+ }
1323
+ .payman-v2-file-card {
1324
+ margin-top: 0.75rem;
1325
+ display: inline-flex;
1326
+ align-items: center;
1327
+ gap: 0.75rem;
1328
+ padding: 0.75rem 1rem;
1329
+ border-radius: var(--payman-v2-radius-xl);
1330
+ border: 1px solid var(--payman-v2-border-1);
1331
+ background: var(--payman-v2-bg-secondary);
1332
+ max-width: 20rem;
1333
+ }
1334
+ .payman-v2-file-card-icon {
1335
+ flex-shrink: 0;
1336
+ width: 2.5rem;
1337
+ height: 2.5rem;
1338
+ border-radius: var(--payman-v2-radius-sm);
1339
+ background: var(--payman-v2-bg-tertiary);
1340
+ display: flex;
1341
+ align-items: center;
1342
+ justify-content: center;
1343
+ color: var(--payman-v2-text-2);
1344
+ }
1345
+ .payman-v2-file-card-info {
1346
+ min-width: 0;
1347
+ flex: 1;
1348
+ }
1349
+ .payman-v2-file-card-name {
1350
+ font-size: 0.875rem;
1351
+ font-weight: 500;
1352
+ color: var(--payman-v2-text-1);
1353
+ overflow: hidden;
1354
+ text-overflow: ellipsis;
1355
+ white-space: nowrap;
1356
+ margin: 0;
1357
+ }
1358
+ .payman-v2-file-card-meta {
1359
+ font-size: 0.75rem;
1360
+ color: var(--payman-v2-text-3);
1361
+ margin: 0;
1362
+ }
1363
+ .payman-v2-file-card-download {
1364
+ flex-shrink: 0;
1365
+ padding: 0.375rem;
1366
+ border-radius: var(--payman-v2-radius-sm);
1367
+ border: none;
1368
+ background: transparent;
1369
+ color: var(--payman-v2-text-3);
1370
+ cursor: pointer;
1371
+ transition: background-color 0.15s, color 0.15s;
1372
+ display: inline-flex;
1373
+ align-items: center;
1374
+ justify-content: center;
1375
+ }
1376
+ .payman-v2-file-card-download:hover {
1377
+ background: var(--payman-v2-hover);
1378
+ color: var(--payman-v2-text-2);
1379
+ }
1380
+ .payman-v2-file-card-image {
1381
+ margin-top: 0.75rem;
1382
+ display: inline-block;
1383
+ }
1384
+ .payman-v2-file-card-image-btn {
1385
+ position: relative;
1386
+ display: block;
1387
+ overflow: hidden;
1388
+ border-radius: var(--payman-v2-radius-xl);
1389
+ border: 1px solid var(--payman-v2-border-1);
1390
+ transition: all 0.15s;
1391
+ background: transparent;
1392
+ padding: 0;
1393
+ cursor: pointer;
1394
+ }
1395
+ .payman-v2-file-card-image-btn:hover {
1396
+ border-color: var(--payman-v2-border-2);
1397
+ }
1398
+ .payman-v2-file-card-image-btn:disabled {
1399
+ cursor: wait;
1400
+ }
1401
+ .payman-v2-file-card-image-btn img {
1402
+ max-width: 20rem;
1403
+ max-height: 15rem;
1404
+ width: 100%;
1405
+ -o-object-fit: cover;
1406
+ object-fit: cover;
1407
+ transition: opacity 0.3s;
1408
+ }
1409
+ .payman-v2-file-card-image-loading {
1410
+ position: absolute;
1411
+ inset: 0;
1412
+ display: flex;
1413
+ flex-direction: column;
1414
+ align-items: center;
1415
+ justify-content: center;
1416
+ gap: 0.5rem;
1417
+ }
1418
+ .payman-v2-file-card-image-spinner {
1419
+ position: relative;
1420
+ height: 1.25rem;
1421
+ width: 1.25rem;
1422
+ }
1423
+ .payman-v2-file-card-image-spinner::after {
1424
+ content: "";
1425
+ position: absolute;
1426
+ inset: 0;
1427
+ border-radius: 50%;
1428
+ border: 2px solid var(--payman-v2-border-1);
1429
+ border-top-color: var(--payman-v2-text-3);
1430
+ animation: payman-v2-spin 0.6s linear infinite;
1431
+ }
1432
+ @keyframes payman-v2-spin {
1433
+ to {
1434
+ transform: rotate(360deg);
1435
+ }
1436
+ }
1437
+ .payman-v2-file-card-image-overlay {
1438
+ position: absolute;
1439
+ inset: 0;
1440
+ display: flex;
1441
+ align-items: center;
1442
+ justify-content: center;
1443
+ background: transparent;
1444
+ transition: background-color 0.15s;
1445
+ }
1446
+ .payman-v2-file-card-image-btn:hover .payman-v2-file-card-image-overlay {
1447
+ background: rgba(0, 0, 0, 0.1);
1448
+ }
1449
+ .payman-v2-file-card-image-overlay-icon {
1450
+ border-radius: var(--payman-v2-radius-full);
1451
+ background: rgba(0, 0, 0, 0.4);
1452
+ backdrop-filter: blur(4px);
1453
+ padding: 0.5rem;
1454
+ opacity: 0;
1455
+ transition: opacity 0.15s;
1456
+ color: white;
1457
+ }
1458
+ .payman-v2-file-card-image-btn:hover .payman-v2-file-card-image-overlay-icon {
1459
+ opacity: 1;
1460
+ }
1461
+ .payman-v2-file-card-image-error {
1462
+ margin-top: 0.75rem;
1463
+ display: inline-block;
1464
+ }
1465
+ .payman-v2-file-card-image-error-inner {
1466
+ display: flex;
1467
+ min-height: 10rem;
1468
+ width: 100%;
1469
+ max-width: 20rem;
1470
+ flex-direction: column;
1471
+ align-items: center;
1472
+ justify-content: center;
1473
+ gap: 0.5rem;
1474
+ border-radius: var(--payman-v2-radius-xl);
1475
+ border: 1px dashed rgba(239, 68, 68, 0.2);
1476
+ background: rgba(239, 68, 68, 0.02);
1477
+ padding: 1rem 1.25rem;
1478
+ text-align: center;
1479
+ }
1480
+ .payman-v2-file-card-image-caption {
1481
+ margin-top: 0.375rem;
1482
+ font-size: 0.75rem;
1483
+ color: var(--payman-v2-text-3);
1484
+ }
1485
+ .payman-v2-file-preview {
1486
+ display: flex;
1487
+ flex-wrap: wrap;
1488
+ gap: 0.5rem;
1489
+ padding-bottom: 0.75rem;
1490
+ }
1491
+ .payman-v2-file-preview-item {
1492
+ position: relative;
1493
+ min-width: 0;
1494
+ max-width: 18rem;
1495
+ flex: 1 0 auto;
1496
+ }
1497
+ @media (min-width: 640px) {
1498
+ .payman-v2-file-preview-item {
1499
+ flex: 0 0 auto;
1500
+ }
1501
+ }
1502
+ .payman-v2-file-preview-shell {
1503
+ display: flex;
1504
+ height: 3.5rem;
1505
+ width: 100%;
1506
+ align-items: center;
1507
+ gap: 0.75rem;
1508
+ border-radius: 1rem;
1509
+ border: 1px solid var(--payman-v2-border-1);
1510
+ background: var(--payman-v2-bg-secondary);
1511
+ padding: 0.5rem 2.5rem 0.5rem 0.5rem;
1512
+ text-align: left;
1513
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.06);
1514
+ }
1515
+ .payman-v2-file-preview-shell-clickable {
1516
+ cursor: pointer;
1517
+ transition: border-color 0.15s, background-color 0.15s;
1518
+ }
1519
+ .payman-v2-file-preview-shell-clickable:hover {
1520
+ border-color: var(--payman-v2-border-2);
1521
+ background: rgba(0, 0, 0, 0.02);
1522
+ }
1523
+ .payman-v2-file-preview-thumb {
1524
+ position: relative;
1525
+ display: flex;
1526
+ height: 2.5rem;
1527
+ width: 2.5rem;
1528
+ flex-shrink: 0;
1529
+ align-items: center;
1530
+ justify-content: center;
1531
+ overflow: hidden;
1532
+ border-radius: var(--payman-v2-radius-xl);
1533
+ background: var(--payman-v2-bg-tertiary);
1534
+ }
1535
+ .payman-v2-file-preview-thumb img {
1536
+ width: 100%;
1537
+ height: 100%;
1538
+ -o-object-fit: cover;
1539
+ object-fit: cover;
1540
+ }
1541
+ .payman-v2-file-preview-info {
1542
+ min-width: 0;
1543
+ flex: 1;
1544
+ }
1545
+ .payman-v2-file-preview-name {
1546
+ overflow: hidden;
1547
+ text-overflow: ellipsis;
1548
+ white-space: nowrap;
1549
+ font-size: 0.875rem;
1550
+ font-weight: 500;
1551
+ color: var(--payman-v2-text-1);
1552
+ margin: 0;
1553
+ }
1554
+ .payman-v2-file-preview-type {
1555
+ overflow: hidden;
1556
+ text-overflow: ellipsis;
1557
+ white-space: nowrap;
1558
+ font-size: 0.75rem;
1559
+ color: var(--payman-v2-text-3);
1560
+ margin: 0;
1561
+ }
1562
+ .payman-v2-file-preview-remove {
1563
+ position: absolute;
1564
+ right: 0.5rem;
1565
+ top: 50%;
1566
+ transform: translateY(-50%);
1567
+ display: flex;
1568
+ height: 1.5rem;
1569
+ width: 1.5rem;
1570
+ align-items: center;
1571
+ justify-content: center;
1572
+ border-radius: var(--payman-v2-radius-full);
1573
+ border: none;
1574
+ background: var(--payman-v2-bg);
1575
+ color: var(--payman-v2-text-2);
1576
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
1577
+ cursor: pointer;
1578
+ transition: background-color 0.15s;
1579
+ }
1580
+ .payman-v2-file-preview-remove:hover {
1581
+ background: var(--payman-v2-bg-tertiary);
1582
+ }
1583
+ .payman-v2-md-image {
1584
+ margin: 0.75rem 0;
1585
+ display: block;
1586
+ width: 100%;
1587
+ }
1588
+ .payman-v2-md-image-button {
1589
+ position: relative;
1590
+ display: flex;
1591
+ width: 100%;
1592
+ max-width: 32rem;
1593
+ margin: 0 auto;
1594
+ align-items: center;
1595
+ justify-content: center;
1596
+ overflow: hidden;
1597
+ border-radius: var(--payman-v2-radius-xl);
1598
+ border: 1px solid var(--payman-v2-border-1);
1599
+ background: rgba(0, 0, 0, 0.02);
1600
+ text-align: left;
1601
+ transition: all 0.15s;
1602
+ padding: 0;
1603
+ cursor: pointer;
1604
+ }
1605
+ .payman-v2-md-image-button:hover {
1606
+ border-color: var(--payman-v2-border-2);
1607
+ }
1608
+ .payman-v2-md-image-button:disabled {
1609
+ cursor: wait;
1610
+ }
1611
+ .payman-v2-md-image-button:disabled:hover {
1612
+ border-color: var(--payman-v2-border-1);
1613
+ }
1614
+ .payman-v2-md-image-img {
1615
+ position: relative;
1616
+ z-index: 1;
1617
+ display: block;
1618
+ height: auto;
1619
+ width: 100%;
1620
+ max-width: 100%;
1621
+ max-height: 22rem;
1622
+ -o-object-fit: contain;
1623
+ object-fit: contain;
1624
+ border-radius: var(--payman-v2-radius-sm);
1625
+ transition: opacity 0.3s;
1626
+ }
1627
+ .payman-v2-md-image-overlay {
1628
+ pointer-events: none;
1629
+ position: absolute;
1630
+ inset: 0;
1631
+ z-index: 2;
1632
+ display: flex;
1633
+ align-items: center;
1634
+ justify-content: center;
1635
+ background: transparent;
1636
+ transition: background-color 0.15s;
1637
+ }
1638
+ .payman-v2-md-image-button:hover .payman-v2-md-image-overlay {
1639
+ background: rgba(0, 0, 0, 0.05);
1640
+ }
1641
+ .payman-v2-md-image-overlay-icon {
1642
+ border-radius: var(--payman-v2-radius-full);
1643
+ background: rgba(0, 0, 0, 0.4);
1644
+ backdrop-filter: blur(4px);
1645
+ padding: 0.5rem;
1646
+ opacity: 0;
1647
+ transition: opacity 0.15s;
1648
+ color: white;
1649
+ }
1650
+ .payman-v2-md-image-button:hover .payman-v2-md-image-overlay-icon {
1651
+ opacity: 1;
1652
+ }
1653
+ .payman-v2-md-image-loading {
1654
+ position: absolute;
1655
+ inset: 0;
1656
+ display: flex;
1657
+ flex-direction: column;
1658
+ align-items: center;
1659
+ justify-content: center;
1660
+ gap: 0.5rem;
1661
+ }
1662
+ .payman-v2-md-image-placeholder {
1663
+ display: flex;
1664
+ width: 100%;
1665
+ max-width: 32rem;
1666
+ align-items: center;
1667
+ justify-content: center;
1668
+ border-radius: var(--payman-v2-radius-xl);
1669
+ border: 1px solid var(--payman-v2-border-1);
1670
+ background: rgba(0, 0, 0, 0.02);
1671
+ min-height: 10rem;
1672
+ }
1673
+ .payman-v2-md-image-resolving {
1674
+ margin: 0.75rem 0;
1675
+ display: flex;
1676
+ width: 100%;
1677
+ align-items: center;
1678
+ justify-content: center;
1679
+ border-radius: var(--payman-v2-radius-xl);
1680
+ border: 1px solid var(--payman-v2-border-1);
1681
+ background: rgba(0, 0, 0, 0.02);
1682
+ }
1683
+ .payman-v2-md-image-resolving-inner {
1684
+ display: flex;
1685
+ min-height: 9rem;
1686
+ flex-direction: column;
1687
+ align-items: center;
1688
+ justify-content: center;
1689
+ gap: 0.625rem;
1690
+ padding: 1rem 1.25rem;
1691
+ text-align: center;
1692
+ }
1693
+ .payman-v2-md-image-error {
1694
+ margin: 0.75rem 0;
1695
+ display: flex;
1696
+ width: 100%;
1697
+ flex-direction: column;
1698
+ align-items: center;
1699
+ justify-content: center;
1700
+ gap: 0.625rem;
1701
+ border-radius: var(--payman-v2-radius-xl);
1702
+ border: 1px dashed rgba(239, 68, 68, 0.2);
1703
+ background: rgba(239, 68, 68, 0.02);
1704
+ padding: 1.5rem 1rem;
1705
+ text-align: center;
1706
+ }
1707
+ .payman-v2-md-image-error-retry {
1708
+ margin-top: 0.25rem;
1709
+ font-size: 11px;
1710
+ font-weight: 500;
1711
+ color: var(--payman-v2-text-2);
1712
+ background: transparent;
1713
+ border: none;
1714
+ cursor: pointer;
1715
+ text-decoration: underline;
1716
+ text-underline-offset: 2px;
1717
+ font-family: inherit;
1718
+ transition: color 0.15s;
1719
+ }
1720
+ .payman-v2-md-image-error-retry:hover {
1721
+ color: var(--payman-v2-text-1);
1722
+ }
1723
+ .payman-v2-lightbox {
1724
+ position: fixed;
1725
+ inset: 0;
1726
+ z-index: 2147483647;
1727
+ display: flex;
1728
+ align-items: center;
1729
+ justify-content: center;
1730
+ padding: 1rem;
1731
+ background: rgba(2, 6, 23, 0.92);
1732
+ isolation: isolate;
1733
+ }
1734
+ .payman-v2-lightbox-controls {
1735
+ position: absolute;
1736
+ top: 1rem;
1737
+ right: 1rem;
1738
+ display: flex;
1739
+ align-items: center;
1740
+ gap: 0.5rem;
1741
+ z-index: 10;
1742
+ }
1743
+ .payman-v2-lightbox-btn {
1744
+ padding: 0.5rem;
1745
+ border-radius: var(--payman-v2-radius-full);
1746
+ border: none;
1747
+ background: rgba(0, 0, 0, 0.6);
1748
+ color: rgba(255, 255, 255, 0.9);
1749
+ cursor: pointer;
1750
+ transition: background-color 0.15s;
1751
+ display: inline-flex;
1752
+ align-items: center;
1753
+ justify-content: center;
1754
+ }
1755
+ .payman-v2-lightbox-btn:hover {
1756
+ background: rgba(0, 0, 0, 0.75);
1757
+ }
1758
+ .payman-v2-lightbox-content {
1759
+ position: relative;
1760
+ display: flex;
1761
+ align-items: center;
1762
+ justify-content: center;
1763
+ width: min(92vw, 1280px);
1764
+ height: min(88vh, 920px);
1765
+ }
1766
+ .payman-v2-lightbox-loading {
1767
+ position: absolute;
1768
+ inset: 0;
1769
+ display: flex;
1770
+ flex-direction: column;
1771
+ align-items: center;
1772
+ justify-content: center;
1773
+ gap: 0.625rem;
1774
+ }
1775
+ .payman-v2-lightbox-loading-text {
1776
+ font-size: 0.875rem;
1777
+ font-weight: 500;
1778
+ color: rgba(255, 255, 255, 0.9);
1779
+ }
1780
+ .payman-v2-lightbox-img-wrapper {
1781
+ display: flex;
1782
+ height: 100%;
1783
+ width: 100%;
1784
+ align-items: center;
1785
+ justify-content: center;
1786
+ padding: 0.75rem;
1787
+ }
1788
+ @media (min-width: 640px) {
1789
+ .payman-v2-lightbox-img-wrapper {
1790
+ padding: 1rem;
1791
+ }
1792
+ }
1793
+ .payman-v2-lightbox-img {
1794
+ display: block;
1795
+ height: 100%;
1796
+ width: 100%;
1797
+ border-radius: var(--payman-v2-radius-xl);
1798
+ -o-object-fit: contain;
1799
+ object-fit: contain;
1800
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
1801
+ -webkit-user-select: none;
1802
+ -moz-user-select: none;
1803
+ user-select: none;
1804
+ }
1805
+ .payman-v2-tooltip {
1806
+ position: relative;
1807
+ display: flex;
1808
+ }
1809
+ .payman-v2-tooltip-content {
1810
+ pointer-events: none;
1811
+ position: absolute;
1812
+ bottom: 100%;
1813
+ left: 50%;
1814
+ z-index: 20;
1815
+ margin-bottom: 0.5rem;
1816
+ transform: translateX(-50%) translateY(4px);
1817
+ opacity: 0;
1818
+ transition: all 0.15s;
1819
+ }
1820
+ .payman-v2-tooltip:hover .payman-v2-tooltip-content,
1821
+ .payman-v2-tooltip:focus-within .payman-v2-tooltip-content {
1822
+ opacity: 1;
1823
+ transform: translateX(-50%) translateY(0);
1824
+ }
1825
+ .payman-v2-tooltip-text {
1826
+ position: relative;
1827
+ border-radius: var(--payman-v2-radius-full);
1828
+ background: var(--payman-v2-bg-secondary);
1829
+ padding: 0.25rem 0.5rem;
1830
+ font-size: 10px;
1831
+ font-weight: 500;
1832
+ line-height: 1;
1833
+ color: var(--payman-v2-text-2);
1834
+ box-shadow: var(--payman-v2-shadow-input);
1835
+ white-space: nowrap;
1836
+ }
1837
+ .payman-v2-tooltip-arrow {
1838
+ position: absolute;
1839
+ left: 50%;
1840
+ top: 100%;
1841
+ transform: translateX(-50%);
1842
+ width: 0;
1843
+ height: 0;
1844
+ border-left: 5px solid transparent;
1845
+ border-right: 5px solid transparent;
1846
+ border-top: 6px solid var(--payman-v2-bg-secondary);
1847
+ }
1848
+ .payman-v2-toast {
1849
+ pointer-events: none;
1850
+ position: fixed;
1851
+ left: 50%;
1852
+ top: 1rem;
1853
+ z-index: 120;
1854
+ transform: translateX(-50%);
1855
+ }
1856
+ .payman-v2-toast-inner {
1857
+ display: inline-flex;
1858
+ align-items: center;
1859
+ gap: 0.5rem;
1860
+ border-radius: var(--payman-v2-radius-full);
1861
+ border: 1px solid;
1862
+ padding: 0.5rem 1rem;
1863
+ font-size: 0.875rem;
1864
+ backdrop-filter: blur(12px);
1865
+ box-shadow: var(--payman-v2-shadow-input);
1866
+ }
1867
+ .payman-v2-toast-success {
1868
+ border-color: var(--payman-v2-success-border);
1869
+ background: rgba(255, 255, 255, 0.95);
1870
+ color: var(--payman-v2-text-1);
1871
+ }
1872
+ .payman-v2-toast-error {
1873
+ border-color: var(--payman-v2-error-border);
1874
+ background: rgba(255, 255, 255, 0.95);
1875
+ color: var(--payman-v2-text-1);
1876
+ }
1877
+ @media (prefers-color-scheme: dark) {
1878
+ .payman-v2-root:not(.payman-v2-light) .payman-v2-toast-success,
1879
+ .payman-v2-root:not(.payman-v2-light) .payman-v2-toast-error {
1880
+ background: rgba(33, 33, 33, 0.95);
1881
+ }
1882
+ }
1883
+ .payman-v2-root.payman-v2-dark .payman-v2-toast-success,
1884
+ .payman-v2-root.payman-v2-dark .payman-v2-toast-error {
1885
+ background: rgba(33, 33, 33, 0.95);
1886
+ }
1887
+ .payman-v2-response-files {
1888
+ display: flex;
1889
+ flex-direction: column;
1890
+ gap: 0.5rem;
1891
+ width: 100%;
1892
+ }
1893
+
1
1894
  /* src/styles.css */
2
1895
  .payman-chat-root {
3
1896
  --color-primary: var(--payman-primary, #18181b);
@@ -250,6 +2143,115 @@
250
2143
  --payman-modal-brand-fg: #ffffff;
251
2144
  --payman-modal-hero-fg: #7dd3c0;
252
2145
  }
2146
+ .payman-reset-session-modal-backdrop {
2147
+ position: fixed;
2148
+ inset: 0;
2149
+ z-index: 1000;
2150
+ display: flex;
2151
+ align-items: center;
2152
+ justify-content: center;
2153
+ padding: 1rem;
2154
+ }
2155
+ .payman-reset-session-modal-overlay {
2156
+ position: absolute;
2157
+ inset: 0;
2158
+ backdrop-filter: blur(6px);
2159
+ background: color-mix(in srgb, #000 40%, transparent);
2160
+ }
2161
+ .payman-reset-session-modal-dialog {
2162
+ position: relative;
2163
+ display: flex;
2164
+ width: min(100%, 28rem);
2165
+ flex-direction: column;
2166
+ gap: 1.25rem;
2167
+ border-radius: 18px;
2168
+ border: 1px solid color-mix(in srgb, var(--payman-border, #e4e4e7) 60%, transparent);
2169
+ background: var(--payman-card, #ffffff);
2170
+ box-shadow: 0 28px 64px -32px rgb(0 0 0 / 0.42);
2171
+ padding: 1.5rem;
2172
+ color: var(--payman-foreground, #18181b);
2173
+ }
2174
+ .payman-reset-session-modal-copy {
2175
+ display: flex;
2176
+ flex-direction: column;
2177
+ gap: 0.5rem;
2178
+ }
2179
+ .payman-reset-session-modal-eyebrow {
2180
+ margin: 0;
2181
+ font-size: 0.75rem;
2182
+ font-weight: 600;
2183
+ letter-spacing: 0.02em;
2184
+ line-height: 1;
2185
+ color: var(--payman-muted-foreground, #71717a);
2186
+ text-transform: uppercase;
2187
+ }
2188
+ .payman-reset-session-modal-title {
2189
+ margin: 0;
2190
+ font-size: 1.125rem;
2191
+ font-weight: 700;
2192
+ line-height: 1.3;
2193
+ color: var(--payman-foreground, #18181b);
2194
+ }
2195
+ .payman-reset-session-modal-description {
2196
+ margin: 0;
2197
+ font-size: 0.875rem;
2198
+ line-height: 1.6;
2199
+ color: var(--payman-muted-foreground, #71717a);
2200
+ max-width: 32ch;
2201
+ }
2202
+ .payman-reset-session-modal-actions {
2203
+ display: flex;
2204
+ justify-content: flex-end;
2205
+ gap: 0.75rem;
2206
+ flex-wrap: wrap;
2207
+ padding-top: 0.25rem;
2208
+ }
2209
+ .payman-reset-session-modal-btn {
2210
+ -webkit-appearance: none;
2211
+ -moz-appearance: none;
2212
+ appearance: none;
2213
+ min-width: 7.5rem;
2214
+ border: 1px solid transparent;
2215
+ border-radius: 999px;
2216
+ padding: 0.6875rem 1rem;
2217
+ font: inherit;
2218
+ font-weight: 600;
2219
+ cursor: pointer;
2220
+ transition:
2221
+ background-color 0.15s,
2222
+ color 0.15s,
2223
+ border-color 0.15s,
2224
+ transform 0.15s;
2225
+ }
2226
+ .payman-reset-session-modal-btn:active {
2227
+ transform: scale(0.98);
2228
+ }
2229
+ .payman-reset-session-modal-btn-secondary {
2230
+ background: transparent;
2231
+ border-color: color-mix(in srgb, var(--payman-secondary-foreground, #18181b) 10%, transparent);
2232
+ color: var(--payman-foreground, #18181b);
2233
+ }
2234
+ .payman-reset-session-modal-btn-secondary:hover {
2235
+ background: color-mix(in srgb, var(--payman-muted, #f4f4f5) 65%, transparent);
2236
+ }
2237
+ .payman-reset-session-modal-btn-primary {
2238
+ background: var(--payman-primary, #18181b);
2239
+ color: var(--payman-primary-foreground, #fafafa);
2240
+ }
2241
+ .payman-reset-session-modal-btn-primary:hover {
2242
+ background: color-mix(in srgb, var(--payman-primary, #18181b) 90%, transparent);
2243
+ }
2244
+ @media (max-width: 640px) {
2245
+ .payman-reset-session-modal-dialog {
2246
+ padding: 1.25rem;
2247
+ }
2248
+ .payman-reset-session-modal-actions {
2249
+ flex-direction: column-reverse;
2250
+ }
2251
+ .payman-reset-session-modal-btn {
2252
+ width: 100%;
2253
+ }
2254
+ }
253
2255
  .payman-modal-backdrop-overlay {
254
2256
  background: var(--payman-modal-backdrop-bg);
255
2257
  }