@paymanai/payman-ask-sdk 1.2.23 → 1.2.25

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,1954 @@
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-header-label {
619
+ display: inline-flex;
620
+ align-items: center;
621
+ gap: 0.5rem;
622
+ }
623
+ .payman-v2-thinking-seconds {
624
+ display: inline-flex;
625
+ align-items: center;
626
+ gap: 1px;
627
+ font-variant-numeric: tabular-nums;
628
+ font-feature-settings: "tnum" 1;
629
+ }
630
+ .payman-v2-thinking-seconds-track {
631
+ display: grid;
632
+ place-items: center;
633
+ min-width: 1.4ch;
634
+ overflow: hidden;
635
+ }
636
+ .payman-v2-thinking-seconds-value {
637
+ grid-area: 1 / 1;
638
+ display: inline-block;
639
+ will-change:
640
+ transform,
641
+ opacity,
642
+ filter;
643
+ }
644
+ .payman-v2-thinking-seconds-suffix {
645
+ display: inline-block;
646
+ }
647
+ .payman-v2-thinking-timer {
648
+ display: inline-flex;
649
+ align-items: center;
650
+ min-width: 1.75rem;
651
+ padding: 1px 7px;
652
+ border-radius: 9999px;
653
+ background: var(--payman-v2-hover);
654
+ color: var(--payman-v2-text-4);
655
+ font-size: 10.5px;
656
+ font-weight: 500;
657
+ letter-spacing: 0.02em;
658
+ line-height: 1.4;
659
+ transition: color 0.2s ease, background-color 0.2s ease;
660
+ }
661
+ .payman-v2-thinking-duration {
662
+ color: currentColor;
663
+ }
664
+ .payman-v2-thinking-toggle:hover .payman-v2-thinking-timer {
665
+ color: var(--payman-v2-text-3);
666
+ }
667
+ .payman-v2-thinking-content {
668
+ overflow: hidden;
669
+ }
670
+ .payman-v2-thinking-border {
671
+ margin-top: 0.375rem;
672
+ margin-left: 0.25rem;
673
+ padding-left: 0.75rem;
674
+ border-left: 1px solid var(--payman-v2-thinking-border-color);
675
+ }
676
+ .payman-v2-thinking-border > * + * {
677
+ margin-top: 0.375rem;
678
+ }
679
+ .payman-v2-thinking-statement {
680
+ font-size: var(--payman-v2-small-font-size);
681
+ font-weight: 500;
682
+ color: var(--payman-v2-thinking-statement-color);
683
+ margin: 0;
684
+ }
685
+ .payman-v2-thinking-statement:not(:first-child) {
686
+ margin-top: 0.25rem;
687
+ }
688
+ .payman-v2-thinking-detail {
689
+ font-size: var(--payman-v2-small-font-size);
690
+ line-height: 1.6;
691
+ color: var(--payman-v2-thinking-detail-color);
692
+ margin: 0;
693
+ }
694
+ .payman-v2-thinking-status {
695
+ display: inline-flex;
696
+ align-items: center;
697
+ border-radius: var(--payman-v2-radius-full);
698
+ padding: 0.25rem 0.625rem;
699
+ font-size: 11px;
700
+ font-weight: 500;
701
+ }
702
+ .payman-v2-thinking-status-success {
703
+ border: 1px solid var(--payman-v2-success-border);
704
+ background: var(--payman-v2-success-bg);
705
+ color: var(--payman-v2-success-color);
706
+ }
707
+ .payman-v2-thinking-status-error {
708
+ border: 1px solid var(--payman-v2-error-border);
709
+ background: var(--payman-v2-error-bg);
710
+ color: var(--payman-v2-error-color);
711
+ }
712
+ .payman-v2-thinking-cursor {
713
+ display: flex;
714
+ align-items: center;
715
+ gap: 0.5rem;
716
+ margin-top: 0.25rem;
717
+ height: 18px;
718
+ }
719
+ .payman-v2-thinking-mark {
720
+ width: 16px;
721
+ height: 16px;
722
+ flex-shrink: 0;
723
+ color: var(--payman-v2-thinking-mark-color-override, #7AE5E0);
724
+ overflow: visible;
725
+ }
726
+ .payman-v2-thinking-cursor-label {
727
+ font-size: var(--payman-v2-small-font-size);
728
+ color: var(--payman-v2-thinking-detail-color);
729
+ -webkit-user-select: none;
730
+ -moz-user-select: none;
731
+ user-select: none;
732
+ }
733
+ .payman-v2-markdown p {
734
+ margin-bottom: 1rem;
735
+ font-size: var(--payman-v2-body-font-size);
736
+ line-height: 1.75;
737
+ color: var(--payman-v2-text-1);
738
+ }
739
+ .payman-v2-markdown p:last-child {
740
+ margin-bottom: 0;
741
+ }
742
+ .payman-v2-markdown code {
743
+ padding: 1px 4px;
744
+ border-radius: 4px;
745
+ background: var(--payman-v2-code-bg);
746
+ font-size: var(--payman-v2-small-font-size);
747
+ font-family: var(--payman-v2-font-mono);
748
+ color: var(--payman-v2-text-1);
749
+ word-break: break-all;
750
+ }
751
+ .payman-v2-markdown-pre {
752
+ margin: 0.5rem 0;
753
+ border-radius: var(--payman-v2-radius-sm);
754
+ background: var(--payman-v2-code-bg);
755
+ border: 1px solid var(--payman-v2-code-border);
756
+ padding: 0.625rem;
757
+ overflow-x: auto;
758
+ }
759
+ .payman-v2-markdown-pre pre {
760
+ font-size: var(--payman-v2-small-font-size);
761
+ font-family: var(--payman-v2-font-mono);
762
+ color: var(--payman-v2-text-1);
763
+ line-height: 1.4;
764
+ margin: 0;
765
+ }
766
+ .payman-v2-markdown ul {
767
+ margin-bottom: 1rem;
768
+ margin-left: 1.5rem;
769
+ list-style-type: disc;
770
+ font-size: var(--payman-v2-body-font-size);
771
+ }
772
+ .payman-v2-markdown ul > li + li {
773
+ margin-top: 0.25rem;
774
+ }
775
+ .payman-v2-markdown ol {
776
+ margin-bottom: 1rem;
777
+ margin-left: 1.5rem;
778
+ list-style-type: decimal;
779
+ font-size: var(--payman-v2-body-font-size);
780
+ }
781
+ .payman-v2-markdown ol > li + li {
782
+ margin-top: 0.25rem;
783
+ }
784
+ .payman-v2-markdown li {
785
+ font-size: var(--payman-v2-body-font-size);
786
+ line-height: 1.75;
787
+ color: var(--payman-v2-text-1);
788
+ padding-left: 0.25rem;
789
+ }
790
+ .payman-v2-markdown h1 {
791
+ font-size: 1.25rem;
792
+ font-weight: 600;
793
+ color: var(--payman-v2-text-1);
794
+ margin-top: 1.5rem;
795
+ margin-bottom: 0.75rem;
796
+ }
797
+ .payman-v2-markdown h1:first-child {
798
+ margin-top: 0;
799
+ }
800
+ .payman-v2-markdown h2 {
801
+ font-size: 1.125rem;
802
+ font-weight: 600;
803
+ color: var(--payman-v2-text-1);
804
+ margin-top: 1.5rem;
805
+ margin-bottom: 0.75rem;
806
+ }
807
+ .payman-v2-markdown h2:first-child {
808
+ margin-top: 0;
809
+ }
810
+ .payman-v2-markdown h3 {
811
+ font-size: 1rem;
812
+ font-weight: 600;
813
+ color: var(--payman-v2-text-1);
814
+ margin-top: 1.25rem;
815
+ margin-bottom: 0.5rem;
816
+ }
817
+ .payman-v2-markdown h3:first-child {
818
+ margin-top: 0;
819
+ }
820
+ .payman-v2-markdown strong {
821
+ font-weight: 600;
822
+ color: var(--payman-v2-text-1);
823
+ }
824
+ .payman-v2-markdown em {
825
+ font-style: italic;
826
+ }
827
+ .payman-v2-markdown blockquote {
828
+ margin: 1rem 0;
829
+ padding-left: 1rem;
830
+ border-left: 2px solid var(--payman-v2-border-1);
831
+ color: var(--payman-v2-text-2);
832
+ font-style: italic;
833
+ }
834
+ .payman-v2-markdown hr {
835
+ margin: 1.5rem 0;
836
+ border: none;
837
+ border-top: 1px solid var(--payman-v2-border-2);
838
+ }
839
+ .payman-v2-markdown a {
840
+ color: var(--payman-v2-text-1);
841
+ text-decoration: underline;
842
+ text-decoration-color: var(--payman-v2-text-3);
843
+ text-underline-offset: 2px;
844
+ transition: text-decoration-color 0.15s;
845
+ }
846
+ .payman-v2-markdown a:hover {
847
+ text-decoration-color: var(--payman-v2-text-2);
848
+ }
849
+ .payman-v2-markdown-table-wrapper {
850
+ margin: 1rem 0;
851
+ width: 100%;
852
+ overflow-x: auto;
853
+ border-radius: var(--payman-v2-radius-xl);
854
+ border: 1px solid var(--payman-v2-code-border);
855
+ }
856
+ .payman-v2-markdown-table {
857
+ min-width: 100%;
858
+ font-size: 0.875rem;
859
+ border-collapse: collapse;
860
+ }
861
+ .payman-v2-markdown-thead {
862
+ background: var(--payman-v2-code-bg);
863
+ border-bottom: 1px solid var(--payman-v2-code-border);
864
+ }
865
+ .payman-v2-markdown-tbody tr + tr {
866
+ border-top: 1px solid var(--payman-v2-code-border);
867
+ }
868
+ .payman-v2-markdown-th {
869
+ padding: 0.75rem 1rem;
870
+ text-align: left;
871
+ font-size: 0.75rem;
872
+ font-weight: 600;
873
+ color: var(--payman-v2-text-2);
874
+ white-space: nowrap;
875
+ }
876
+ .payman-v2-markdown-td {
877
+ padding: 0.75rem 1rem;
878
+ font-size: 0.875rem;
879
+ color: var(--payman-v2-text-1);
880
+ white-space: nowrap;
881
+ }
882
+ .payman-v2-input-container {
883
+ width: 100%;
884
+ max-width: var(--payman-v2-max-content-width);
885
+ margin: 0 auto;
886
+ padding: 0.5rem 1rem 0.75rem;
887
+ }
888
+ @media (min-width: 640px) {
889
+ .payman-v2-input-container {
890
+ padding-left: 1.25rem;
891
+ padding-right: 1.25rem;
892
+ }
893
+ }
894
+ .payman-v2-input-wrapper {
895
+ position: relative;
896
+ border-radius: var(--payman-v2-radius-input);
897
+ transition: box-shadow 0.2s;
898
+ box-shadow: var(--payman-v2-shadow-input);
899
+ }
900
+ .payman-v2-input-wrapper-focused {
901
+ box-shadow: var(--payman-v2-shadow-input-focus);
902
+ }
903
+ .payman-v2-input-body {
904
+ padding: 0.75rem 1rem 0;
905
+ }
906
+ .payman-v2-input-editing-banner {
907
+ margin-bottom: 0.5rem;
908
+ display: flex;
909
+ align-items: center;
910
+ justify-content: space-between;
911
+ gap: 0.5rem;
912
+ border-radius: var(--payman-v2-radius-xl);
913
+ border: 1px solid var(--payman-v2-border-1);
914
+ background: var(--payman-v2-bg-secondary);
915
+ padding: 0.375rem 0.625rem;
916
+ }
917
+ .payman-v2-input-editing-banner-info {
918
+ display: flex;
919
+ align-items: center;
920
+ gap: 0.5rem;
921
+ min-width: 0;
922
+ }
923
+ .payman-v2-input-editing-icon-wrap {
924
+ display: flex;
925
+ height: 1.25rem;
926
+ width: 1.25rem;
927
+ align-items: center;
928
+ justify-content: center;
929
+ border-radius: var(--payman-v2-radius-full);
930
+ background: var(--payman-v2-bg);
931
+ }
932
+ .payman-v2-input-editing-label {
933
+ font-size: 0.75rem;
934
+ color: var(--payman-v2-text-2);
935
+ min-width: 0;
936
+ margin: 0;
937
+ }
938
+ .payman-v2-input-editing-close {
939
+ display: flex;
940
+ height: 1.5rem;
941
+ width: 1.5rem;
942
+ align-items: center;
943
+ justify-content: center;
944
+ border-radius: var(--payman-v2-radius-full);
945
+ border: none;
946
+ background: transparent;
947
+ color: var(--payman-v2-text-3);
948
+ cursor: pointer;
949
+ transition: background-color 0.15s, color 0.15s;
950
+ }
951
+ .payman-v2-input-editing-close:hover {
952
+ background: var(--payman-v2-bg);
953
+ color: var(--payman-v2-text-2);
954
+ }
955
+ .payman-v2-input-textarea {
956
+ width: 100%;
957
+ resize: none;
958
+ background: transparent;
959
+ font-size: var(--payman-v2-body-font-size);
960
+ color: var(--payman-v2-text-1);
961
+ line-height: 1.5;
962
+ border: none;
963
+ outline: none;
964
+ font-family: var(--payman-v2-font-sans);
965
+ scrollbar-width: thin;
966
+ scrollbar-color: var(--payman-v2-border-1) transparent;
967
+ }
968
+ .payman-v2-input-textarea::-moz-placeholder {
969
+ color: var(--payman-v2-text-4);
970
+ }
971
+ .payman-v2-input-textarea::placeholder {
972
+ color: var(--payman-v2-text-4);
973
+ }
974
+ .payman-v2-input-textarea::-webkit-scrollbar {
975
+ width: 6px;
976
+ }
977
+ .payman-v2-input-textarea::-webkit-scrollbar-track {
978
+ background: transparent;
979
+ }
980
+ .payman-v2-input-textarea::-webkit-scrollbar-thumb {
981
+ background: var(--payman-v2-border-1);
982
+ border-radius: 3px;
983
+ }
984
+ .payman-v2-input-controls {
985
+ display: flex;
986
+ align-items: center;
987
+ justify-content: space-between;
988
+ padding: 0.125rem 0.75rem 0.625rem;
989
+ }
990
+ .payman-v2-input-controls-left {
991
+ display: flex;
992
+ align-items: center;
993
+ gap: 0.125rem;
994
+ }
995
+ .payman-v2-input-controls-right {
996
+ display: flex;
997
+ align-items: center;
998
+ gap: 0.5rem;
999
+ }
1000
+ .payman-v2-input-new-session-btn {
1001
+ position: relative;
1002
+ padding: 0.375rem;
1003
+ border-radius: var(--payman-v2-radius-full);
1004
+ border: none;
1005
+ background: transparent;
1006
+ cursor: pointer;
1007
+ transition:
1008
+ color 0.15s,
1009
+ background-color 0.15s,
1010
+ transform 0.15s;
1011
+ color: var(--payman-v2-text-3);
1012
+ display: inline-flex;
1013
+ align-items: center;
1014
+ justify-content: center;
1015
+ }
1016
+ .payman-v2-input-new-session-btn:hover:not(:disabled) {
1017
+ background: var(--payman-v2-hover);
1018
+ color: var(--payman-v2-text-2);
1019
+ }
1020
+ .payman-v2-input-new-session-btn:active:not(:disabled) {
1021
+ transform: scale(0.95);
1022
+ }
1023
+ .payman-v2-input-new-session-btn:disabled {
1024
+ opacity: 0.4;
1025
+ cursor: not-allowed;
1026
+ }
1027
+ .payman-v2-input-new-session-tooltip {
1028
+ pointer-events: none;
1029
+ position: absolute;
1030
+ bottom: calc(100% + 0.5rem);
1031
+ left: 50%;
1032
+ transform: translateX(-50%) translateY(4px);
1033
+ opacity: 0;
1034
+ border-radius: var(--payman-v2-radius-full);
1035
+ background: var(--payman-v2-bg-secondary);
1036
+ color: var(--payman-v2-text-2);
1037
+ box-shadow: var(--payman-v2-shadow-input);
1038
+ font-size: 11px;
1039
+ font-weight: 500;
1040
+ line-height: 1;
1041
+ padding: 0.5rem 0.625rem;
1042
+ white-space: nowrap;
1043
+ transition: opacity 0.15s, transform 0.15s;
1044
+ z-index: 20;
1045
+ }
1046
+ .payman-v2-input-new-session-tooltip::before {
1047
+ content: "";
1048
+ position: absolute;
1049
+ top: 100%;
1050
+ left: 50%;
1051
+ transform: translateX(-50%);
1052
+ width: 0;
1053
+ height: 0;
1054
+ border-left: 6px solid transparent;
1055
+ border-right: 6px solid transparent;
1056
+ border-top: 7px solid var(--payman-v2-bg-secondary);
1057
+ }
1058
+ .payman-v2-input-new-session-btn:hover:not(:disabled) .payman-v2-input-new-session-tooltip,
1059
+ .payman-v2-input-new-session-btn:focus-visible:not(:disabled) .payman-v2-input-new-session-tooltip {
1060
+ opacity: 1;
1061
+ transform: translateX(-50%) translateY(0);
1062
+ }
1063
+ .payman-v2-input-attach-btn {
1064
+ padding: 0.375rem;
1065
+ border-radius: var(--payman-v2-radius-full);
1066
+ border: none;
1067
+ background: transparent;
1068
+ cursor: pointer;
1069
+ transition: all 0.15s;
1070
+ color: var(--payman-v2-text-3);
1071
+ display: inline-flex;
1072
+ align-items: center;
1073
+ justify-content: center;
1074
+ }
1075
+ .payman-v2-input-attach-btn:hover {
1076
+ background: var(--payman-v2-hover);
1077
+ color: var(--payman-v2-text-2);
1078
+ }
1079
+ .payman-v2-input-attach-btn-active {
1080
+ background: var(--payman-v2-bg-tertiary);
1081
+ color: var(--payman-v2-text-2);
1082
+ transform: rotate(45deg);
1083
+ }
1084
+ .payman-v2-input-attach-btn:disabled {
1085
+ opacity: 0.4;
1086
+ cursor: not-allowed;
1087
+ }
1088
+ .payman-v2-input-attach-menu {
1089
+ position: absolute;
1090
+ bottom: 100%;
1091
+ left: 0;
1092
+ margin-bottom: 0.5rem;
1093
+ background: var(--payman-v2-bg);
1094
+ border: 1px solid var(--payman-v2-border-1);
1095
+ border-radius: var(--payman-v2-radius-xl);
1096
+ box-shadow: var(--payman-v2-shadow-input);
1097
+ overflow: hidden;
1098
+ z-index: 10;
1099
+ }
1100
+ .payman-v2-input-attach-option {
1101
+ display: flex;
1102
+ align-items: center;
1103
+ gap: 0.625rem;
1104
+ padding: 0.625rem 1rem;
1105
+ width: 100%;
1106
+ text-align: left;
1107
+ font-size: 0.875rem;
1108
+ color: var(--payman-v2-text-2);
1109
+ background: transparent;
1110
+ border: none;
1111
+ cursor: pointer;
1112
+ transition: background-color 0.15s;
1113
+ white-space: nowrap;
1114
+ font-family: inherit;
1115
+ }
1116
+ .payman-v2-input-attach-option:hover {
1117
+ background: var(--payman-v2-hover);
1118
+ }
1119
+ .payman-v2-input-attach-option-icon {
1120
+ color: var(--payman-v2-text-3);
1121
+ }
1122
+ .payman-v2-input-mic-btn {
1123
+ position: relative;
1124
+ padding: 0.375rem;
1125
+ border-radius: var(--payman-v2-radius-full);
1126
+ border: none;
1127
+ background: transparent;
1128
+ cursor: pointer;
1129
+ transition: color 0.15s, background-color 0.15s;
1130
+ color: var(--payman-v2-text-3);
1131
+ display: inline-flex;
1132
+ align-items: center;
1133
+ justify-content: center;
1134
+ }
1135
+ .payman-v2-input-mic-btn:hover {
1136
+ color: var(--payman-v2-text-2);
1137
+ background: var(--payman-v2-hover);
1138
+ }
1139
+ .payman-v2-input-mic-btn:disabled {
1140
+ opacity: 0.4;
1141
+ cursor: not-allowed;
1142
+ }
1143
+ .payman-v2-input-mic-recording {
1144
+ color: var(--payman-v2-error-color);
1145
+ }
1146
+ .payman-v2-input-mic-recording:hover {
1147
+ background: rgba(239, 68, 68, 0.1);
1148
+ }
1149
+ .payman-v2-input-mic-indicator {
1150
+ position: absolute;
1151
+ top: 2px;
1152
+ right: 2px;
1153
+ height: 6px;
1154
+ width: 6px;
1155
+ border-radius: var(--payman-v2-radius-full);
1156
+ background: var(--payman-v2-error-color);
1157
+ }
1158
+ .payman-v2-input-voice-tooltip {
1159
+ pointer-events: none;
1160
+ position: absolute;
1161
+ bottom: 100%;
1162
+ left: 50%;
1163
+ transform: translateX(-50%);
1164
+ z-index: 20;
1165
+ margin-bottom: 0.5rem;
1166
+ }
1167
+ .payman-v2-input-voice-tooltip-content {
1168
+ position: relative;
1169
+ border-radius: var(--payman-v2-radius-full);
1170
+ background: var(--payman-v2-bg-secondary);
1171
+ padding: 0.375rem 0.75rem;
1172
+ font-size: 11px;
1173
+ font-weight: 500;
1174
+ color: var(--payman-v2-text-2);
1175
+ box-shadow: var(--payman-v2-shadow-input);
1176
+ white-space: nowrap;
1177
+ }
1178
+ .payman-v2-input-voice-tooltip-arrow {
1179
+ position: absolute;
1180
+ left: 50%;
1181
+ top: 100%;
1182
+ transform: translateX(-50%);
1183
+ width: 0;
1184
+ height: 0;
1185
+ border-left: 6px solid transparent;
1186
+ border-right: 6px solid transparent;
1187
+ border-top: 7px solid var(--payman-v2-bg-secondary);
1188
+ }
1189
+ .payman-v2-input-send-btn {
1190
+ width: var(--payman-v2-send-btn-size);
1191
+ height: var(--payman-v2-send-btn-size);
1192
+ border-radius: var(--payman-v2-radius-full);
1193
+ border: none;
1194
+ display: flex;
1195
+ align-items: center;
1196
+ justify-content: center;
1197
+ transition: all 0.15s;
1198
+ cursor: pointer;
1199
+ background: var(--payman-v2-btn-primary);
1200
+ }
1201
+ .payman-v2-input-send-btn:hover {
1202
+ opacity: 0.8;
1203
+ }
1204
+ .payman-v2-input-send-btn:active {
1205
+ transform: scale(0.95);
1206
+ }
1207
+ .payman-v2-input-send-icon {
1208
+ color: var(--payman-v2-btn-primary-text);
1209
+ }
1210
+ .payman-v2-input-send-btn-disabled {
1211
+ background: var(--payman-v2-btn-disabled);
1212
+ cursor: not-allowed;
1213
+ }
1214
+ .payman-v2-input-send-btn-disabled:hover {
1215
+ opacity: 1;
1216
+ }
1217
+ .payman-v2-input-send-btn-disabled .payman-v2-input-send-icon {
1218
+ color: var(--payman-v2-btn-disabled-text);
1219
+ }
1220
+ .payman-v2-input-disclaimer {
1221
+ text-align: center;
1222
+ font-size: 11px;
1223
+ color: var(--payman-v2-text-4);
1224
+ margin-top: 0.5rem;
1225
+ -webkit-user-select: none;
1226
+ -moz-user-select: none;
1227
+ user-select: none;
1228
+ }
1229
+ .payman-v2-input-file-input {
1230
+ display: none;
1231
+ }
1232
+ .payman-v2-verification {
1233
+ max-width: 17.5rem;
1234
+ }
1235
+ .payman-v2-verification-card {
1236
+ border-radius: var(--payman-v2-radius-xl);
1237
+ border: 1px solid var(--payman-v2-verification-border);
1238
+ background: var(--payman-v2-verification-bg);
1239
+ overflow: hidden;
1240
+ }
1241
+ .payman-v2-verification-header {
1242
+ padding: 0.875rem 1rem 0.75rem;
1243
+ }
1244
+ .payman-v2-verification-header-row {
1245
+ display: flex;
1246
+ align-items: center;
1247
+ gap: 0.5rem;
1248
+ margin-bottom: 0.5rem;
1249
+ }
1250
+ .payman-v2-verification-icon {
1251
+ color: var(--payman-v2-text-3);
1252
+ flex-shrink: 0;
1253
+ }
1254
+ .payman-v2-verification-title {
1255
+ font-size: 0.75rem;
1256
+ font-weight: 500;
1257
+ color: var(--payman-v2-text-1);
1258
+ margin: 0;
1259
+ }
1260
+ .payman-v2-verification-amount {
1261
+ margin-left: auto;
1262
+ font-size: 0.875rem;
1263
+ font-weight: 600;
1264
+ color: var(--payman-v2-text-1);
1265
+ font-variant-numeric: tabular-nums;
1266
+ }
1267
+ .payman-v2-verification-payee {
1268
+ margin-left: auto;
1269
+ font-size: 0.75rem;
1270
+ font-weight: 500;
1271
+ color: var(--payman-v2-text-2);
1272
+ overflow: hidden;
1273
+ text-overflow: ellipsis;
1274
+ white-space: nowrap;
1275
+ max-width: 120px;
1276
+ }
1277
+ .payman-v2-verification-description {
1278
+ font-size: 11px;
1279
+ color: var(--payman-v2-text-3);
1280
+ line-height: 1.4;
1281
+ margin: 0 0 0.75rem;
1282
+ }
1283
+ .payman-v2-verification-submitting {
1284
+ display: flex;
1285
+ align-items: center;
1286
+ justify-content: center;
1287
+ gap: 0.375rem;
1288
+ margin-top: 0.5rem;
1289
+ }
1290
+ .payman-v2-verification-submitting-text {
1291
+ font-size: 11px;
1292
+ color: var(--payman-v2-text-3);
1293
+ }
1294
+ .payman-v2-verification-actions {
1295
+ display: flex;
1296
+ align-items: stretch;
1297
+ border-top: 1px solid var(--payman-v2-verification-border);
1298
+ }
1299
+ .payman-v2-verification-cancel-btn {
1300
+ flex: 1;
1301
+ display: flex;
1302
+ align-items: center;
1303
+ justify-content: center;
1304
+ gap: 0.25rem;
1305
+ width: 100%;
1306
+ padding: 0.5rem;
1307
+ font-size: 11px;
1308
+ font-weight: 500;
1309
+ background: transparent;
1310
+ border: none;
1311
+ cursor: pointer;
1312
+ transition: color 0.15s, background-color 0.15s;
1313
+ font-family: inherit;
1314
+ color: rgba(239, 68, 68, 0.7);
1315
+ }
1316
+ .payman-v2-verification-cancel-btn:hover {
1317
+ color: var(--payman-v2-error-color);
1318
+ background: var(--payman-v2-error-bg);
1319
+ }
1320
+ .payman-v2-verification-cancel-btn:disabled {
1321
+ opacity: 0.4;
1322
+ cursor: not-allowed;
1323
+ }
1324
+ .payman-v2-verification-resend-link {
1325
+ display: block;
1326
+ width: 100%;
1327
+ margin-top: 0.5rem;
1328
+ padding: 0;
1329
+ font-size: 11px;
1330
+ font-weight: 500;
1331
+ font-family: inherit;
1332
+ text-align: center;
1333
+ color: var(--payman-v2-text-3);
1334
+ background: none;
1335
+ border: none;
1336
+ cursor: pointer;
1337
+ transition: color 0.15s;
1338
+ }
1339
+ .payman-v2-verification-resend-link:hover:not(:disabled) {
1340
+ color: var(--payman-v2-text-2);
1341
+ }
1342
+ .payman-v2-verification-resend-link:disabled {
1343
+ opacity: 0.4;
1344
+ cursor: not-allowed;
1345
+ }
1346
+ .payman-v2-otp {
1347
+ display: flex;
1348
+ justify-content: center;
1349
+ gap: 0.375rem;
1350
+ }
1351
+ .payman-v2-otp-digit {
1352
+ width: 2rem;
1353
+ height: 2.25rem;
1354
+ text-align: center;
1355
+ font-size: 1rem;
1356
+ font-weight: 600;
1357
+ border-radius: var(--payman-v2-radius-sm);
1358
+ background: var(--payman-v2-bg);
1359
+ border: 1px solid var(--payman-v2-border-1);
1360
+ color: var(--payman-v2-text-1);
1361
+ outline: none;
1362
+ transition: all 0.15s;
1363
+ cursor: text;
1364
+ font-family: inherit;
1365
+ }
1366
+ .payman-v2-otp-digit:focus {
1367
+ border-color: var(--payman-v2-btn-primary);
1368
+ box-shadow: 0 0 0 1px rgba(13, 13, 13, 0.2);
1369
+ }
1370
+ .payman-v2-otp-digit-filled {
1371
+ border-color: rgba(13, 13, 13, 0.4);
1372
+ }
1373
+ .payman-v2-otp-digit-error {
1374
+ border-color: var(--payman-v2-error-color);
1375
+ background: var(--payman-v2-error-bg);
1376
+ }
1377
+ .payman-v2-otp-digit:disabled {
1378
+ opacity: 0.5;
1379
+ cursor: not-allowed;
1380
+ }
1381
+ .payman-v2-file-card {
1382
+ margin-top: 0.75rem;
1383
+ display: inline-flex;
1384
+ align-items: center;
1385
+ gap: 0.75rem;
1386
+ padding: 0.75rem 1rem;
1387
+ border-radius: var(--payman-v2-radius-xl);
1388
+ border: 1px solid var(--payman-v2-border-1);
1389
+ background: var(--payman-v2-bg-secondary);
1390
+ max-width: 20rem;
1391
+ }
1392
+ .payman-v2-file-card-icon {
1393
+ flex-shrink: 0;
1394
+ width: 2.5rem;
1395
+ height: 2.5rem;
1396
+ border-radius: var(--payman-v2-radius-sm);
1397
+ background: var(--payman-v2-bg-tertiary);
1398
+ display: flex;
1399
+ align-items: center;
1400
+ justify-content: center;
1401
+ color: var(--payman-v2-text-2);
1402
+ }
1403
+ .payman-v2-file-card-info {
1404
+ min-width: 0;
1405
+ flex: 1;
1406
+ }
1407
+ .payman-v2-file-card-name {
1408
+ font-size: 0.875rem;
1409
+ font-weight: 500;
1410
+ color: var(--payman-v2-text-1);
1411
+ overflow: hidden;
1412
+ text-overflow: ellipsis;
1413
+ white-space: nowrap;
1414
+ margin: 0;
1415
+ }
1416
+ .payman-v2-file-card-meta {
1417
+ font-size: 0.75rem;
1418
+ color: var(--payman-v2-text-3);
1419
+ margin: 0;
1420
+ }
1421
+ .payman-v2-file-card-download {
1422
+ flex-shrink: 0;
1423
+ padding: 0.375rem;
1424
+ border-radius: var(--payman-v2-radius-sm);
1425
+ border: none;
1426
+ background: transparent;
1427
+ color: var(--payman-v2-text-3);
1428
+ cursor: pointer;
1429
+ transition: background-color 0.15s, color 0.15s;
1430
+ display: inline-flex;
1431
+ align-items: center;
1432
+ justify-content: center;
1433
+ }
1434
+ .payman-v2-file-card-download:hover {
1435
+ background: var(--payman-v2-hover);
1436
+ color: var(--payman-v2-text-2);
1437
+ }
1438
+ .payman-v2-file-card-image {
1439
+ margin-top: 0.75rem;
1440
+ display: inline-block;
1441
+ }
1442
+ .payman-v2-file-card-image-btn {
1443
+ position: relative;
1444
+ display: block;
1445
+ overflow: hidden;
1446
+ border-radius: var(--payman-v2-radius-xl);
1447
+ border: 1px solid var(--payman-v2-border-1);
1448
+ transition: all 0.15s;
1449
+ background: transparent;
1450
+ padding: 0;
1451
+ cursor: pointer;
1452
+ }
1453
+ .payman-v2-file-card-image-btn:hover {
1454
+ border-color: var(--payman-v2-border-2);
1455
+ }
1456
+ .payman-v2-file-card-image-btn:disabled {
1457
+ cursor: wait;
1458
+ }
1459
+ .payman-v2-file-card-image-btn img {
1460
+ max-width: 20rem;
1461
+ max-height: 15rem;
1462
+ width: 100%;
1463
+ -o-object-fit: cover;
1464
+ object-fit: cover;
1465
+ transition: opacity 0.3s;
1466
+ }
1467
+ .payman-v2-file-card-image-loading {
1468
+ position: absolute;
1469
+ inset: 0;
1470
+ display: flex;
1471
+ flex-direction: column;
1472
+ align-items: center;
1473
+ justify-content: center;
1474
+ gap: 0.5rem;
1475
+ }
1476
+ .payman-v2-file-card-image-spinner {
1477
+ position: relative;
1478
+ height: 1.25rem;
1479
+ width: 1.25rem;
1480
+ }
1481
+ .payman-v2-file-card-image-spinner::after {
1482
+ content: "";
1483
+ position: absolute;
1484
+ inset: 0;
1485
+ border-radius: 50%;
1486
+ border: 2px solid var(--payman-v2-border-1);
1487
+ border-top-color: var(--payman-v2-text-3);
1488
+ animation: payman-v2-spin 0.6s linear infinite;
1489
+ }
1490
+ @keyframes payman-v2-spin {
1491
+ to {
1492
+ transform: rotate(360deg);
1493
+ }
1494
+ }
1495
+ .payman-v2-file-card-image-overlay {
1496
+ position: absolute;
1497
+ inset: 0;
1498
+ display: flex;
1499
+ align-items: center;
1500
+ justify-content: center;
1501
+ background: transparent;
1502
+ transition: background-color 0.15s;
1503
+ }
1504
+ .payman-v2-file-card-image-btn:hover .payman-v2-file-card-image-overlay {
1505
+ background: rgba(0, 0, 0, 0.1);
1506
+ }
1507
+ .payman-v2-file-card-image-overlay-icon {
1508
+ border-radius: var(--payman-v2-radius-full);
1509
+ background: rgba(0, 0, 0, 0.4);
1510
+ backdrop-filter: blur(4px);
1511
+ padding: 0.5rem;
1512
+ opacity: 0;
1513
+ transition: opacity 0.15s;
1514
+ color: white;
1515
+ }
1516
+ .payman-v2-file-card-image-btn:hover .payman-v2-file-card-image-overlay-icon {
1517
+ opacity: 1;
1518
+ }
1519
+ .payman-v2-file-card-image-error {
1520
+ margin-top: 0.75rem;
1521
+ display: inline-block;
1522
+ }
1523
+ .payman-v2-file-card-image-error-inner {
1524
+ display: flex;
1525
+ min-height: 10rem;
1526
+ width: 100%;
1527
+ max-width: 20rem;
1528
+ flex-direction: column;
1529
+ align-items: center;
1530
+ justify-content: center;
1531
+ gap: 0.5rem;
1532
+ border-radius: var(--payman-v2-radius-xl);
1533
+ border: 1px dashed rgba(239, 68, 68, 0.2);
1534
+ background: rgba(239, 68, 68, 0.02);
1535
+ padding: 1rem 1.25rem;
1536
+ text-align: center;
1537
+ }
1538
+ .payman-v2-file-card-image-caption {
1539
+ margin-top: 0.375rem;
1540
+ font-size: 0.75rem;
1541
+ color: var(--payman-v2-text-3);
1542
+ }
1543
+ .payman-v2-file-preview {
1544
+ display: flex;
1545
+ flex-wrap: wrap;
1546
+ gap: 0.5rem;
1547
+ padding-bottom: 0.75rem;
1548
+ }
1549
+ .payman-v2-file-preview-item {
1550
+ position: relative;
1551
+ min-width: 0;
1552
+ max-width: 18rem;
1553
+ flex: 1 0 auto;
1554
+ }
1555
+ @media (min-width: 640px) {
1556
+ .payman-v2-file-preview-item {
1557
+ flex: 0 0 auto;
1558
+ }
1559
+ }
1560
+ .payman-v2-file-preview-shell {
1561
+ display: flex;
1562
+ height: 3.5rem;
1563
+ width: 100%;
1564
+ align-items: center;
1565
+ gap: 0.75rem;
1566
+ border-radius: 1rem;
1567
+ border: 1px solid var(--payman-v2-border-1);
1568
+ background: var(--payman-v2-bg-secondary);
1569
+ padding: 0.5rem 2.5rem 0.5rem 0.5rem;
1570
+ text-align: left;
1571
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.06);
1572
+ }
1573
+ .payman-v2-file-preview-shell-clickable {
1574
+ cursor: pointer;
1575
+ transition: border-color 0.15s, background-color 0.15s;
1576
+ }
1577
+ .payman-v2-file-preview-shell-clickable:hover {
1578
+ border-color: var(--payman-v2-border-2);
1579
+ background: rgba(0, 0, 0, 0.02);
1580
+ }
1581
+ .payman-v2-file-preview-thumb {
1582
+ position: relative;
1583
+ display: flex;
1584
+ height: 2.5rem;
1585
+ width: 2.5rem;
1586
+ flex-shrink: 0;
1587
+ align-items: center;
1588
+ justify-content: center;
1589
+ overflow: hidden;
1590
+ border-radius: var(--payman-v2-radius-xl);
1591
+ background: var(--payman-v2-bg-tertiary);
1592
+ }
1593
+ .payman-v2-file-preview-thumb img {
1594
+ width: 100%;
1595
+ height: 100%;
1596
+ -o-object-fit: cover;
1597
+ object-fit: cover;
1598
+ }
1599
+ .payman-v2-file-preview-info {
1600
+ min-width: 0;
1601
+ flex: 1;
1602
+ }
1603
+ .payman-v2-file-preview-name {
1604
+ overflow: hidden;
1605
+ text-overflow: ellipsis;
1606
+ white-space: nowrap;
1607
+ font-size: 0.875rem;
1608
+ font-weight: 500;
1609
+ color: var(--payman-v2-text-1);
1610
+ margin: 0;
1611
+ }
1612
+ .payman-v2-file-preview-type {
1613
+ overflow: hidden;
1614
+ text-overflow: ellipsis;
1615
+ white-space: nowrap;
1616
+ font-size: 0.75rem;
1617
+ color: var(--payman-v2-text-3);
1618
+ margin: 0;
1619
+ }
1620
+ .payman-v2-file-preview-remove {
1621
+ position: absolute;
1622
+ right: 0.5rem;
1623
+ top: 50%;
1624
+ transform: translateY(-50%);
1625
+ display: flex;
1626
+ height: 1.5rem;
1627
+ width: 1.5rem;
1628
+ align-items: center;
1629
+ justify-content: center;
1630
+ border-radius: var(--payman-v2-radius-full);
1631
+ border: none;
1632
+ background: var(--payman-v2-bg);
1633
+ color: var(--payman-v2-text-2);
1634
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
1635
+ cursor: pointer;
1636
+ transition: background-color 0.15s;
1637
+ }
1638
+ .payman-v2-file-preview-remove:hover {
1639
+ background: var(--payman-v2-bg-tertiary);
1640
+ }
1641
+ .payman-v2-md-image {
1642
+ margin: 0.75rem 0;
1643
+ display: block;
1644
+ width: 100%;
1645
+ }
1646
+ .payman-v2-md-image-button {
1647
+ position: relative;
1648
+ display: flex;
1649
+ width: 100%;
1650
+ max-width: 32rem;
1651
+ margin: 0 auto;
1652
+ align-items: center;
1653
+ justify-content: center;
1654
+ overflow: hidden;
1655
+ border-radius: var(--payman-v2-radius-xl);
1656
+ border: 1px solid var(--payman-v2-border-1);
1657
+ background: rgba(0, 0, 0, 0.02);
1658
+ text-align: left;
1659
+ transition: all 0.15s;
1660
+ padding: 0;
1661
+ cursor: pointer;
1662
+ }
1663
+ .payman-v2-md-image-button:hover {
1664
+ border-color: var(--payman-v2-border-2);
1665
+ }
1666
+ .payman-v2-md-image-button:disabled {
1667
+ cursor: wait;
1668
+ }
1669
+ .payman-v2-md-image-button:disabled:hover {
1670
+ border-color: var(--payman-v2-border-1);
1671
+ }
1672
+ .payman-v2-md-image-img {
1673
+ position: relative;
1674
+ z-index: 1;
1675
+ display: block;
1676
+ height: auto;
1677
+ width: 100%;
1678
+ max-width: 100%;
1679
+ max-height: 22rem;
1680
+ -o-object-fit: contain;
1681
+ object-fit: contain;
1682
+ border-radius: var(--payman-v2-radius-sm);
1683
+ transition: opacity 0.3s;
1684
+ }
1685
+ .payman-v2-md-image-overlay {
1686
+ pointer-events: none;
1687
+ position: absolute;
1688
+ inset: 0;
1689
+ z-index: 2;
1690
+ display: flex;
1691
+ align-items: center;
1692
+ justify-content: center;
1693
+ background: transparent;
1694
+ transition: background-color 0.15s;
1695
+ }
1696
+ .payman-v2-md-image-button:hover .payman-v2-md-image-overlay {
1697
+ background: rgba(0, 0, 0, 0.05);
1698
+ }
1699
+ .payman-v2-md-image-overlay-icon {
1700
+ border-radius: var(--payman-v2-radius-full);
1701
+ background: rgba(0, 0, 0, 0.4);
1702
+ backdrop-filter: blur(4px);
1703
+ padding: 0.5rem;
1704
+ opacity: 0;
1705
+ transition: opacity 0.15s;
1706
+ color: white;
1707
+ }
1708
+ .payman-v2-md-image-button:hover .payman-v2-md-image-overlay-icon {
1709
+ opacity: 1;
1710
+ }
1711
+ .payman-v2-md-image-loading {
1712
+ position: absolute;
1713
+ inset: 0;
1714
+ display: flex;
1715
+ flex-direction: column;
1716
+ align-items: center;
1717
+ justify-content: center;
1718
+ gap: 0.5rem;
1719
+ }
1720
+ .payman-v2-md-image-placeholder {
1721
+ display: flex;
1722
+ width: 100%;
1723
+ max-width: 32rem;
1724
+ align-items: center;
1725
+ justify-content: center;
1726
+ border-radius: var(--payman-v2-radius-xl);
1727
+ border: 1px solid var(--payman-v2-border-1);
1728
+ background: rgba(0, 0, 0, 0.02);
1729
+ min-height: 10rem;
1730
+ }
1731
+ .payman-v2-md-image-resolving {
1732
+ margin: 0.75rem 0;
1733
+ display: flex;
1734
+ width: 100%;
1735
+ align-items: center;
1736
+ justify-content: center;
1737
+ border-radius: var(--payman-v2-radius-xl);
1738
+ border: 1px solid var(--payman-v2-border-1);
1739
+ background: rgba(0, 0, 0, 0.02);
1740
+ }
1741
+ .payman-v2-md-image-resolving-inner {
1742
+ display: flex;
1743
+ min-height: 9rem;
1744
+ flex-direction: column;
1745
+ align-items: center;
1746
+ justify-content: center;
1747
+ gap: 0.625rem;
1748
+ padding: 1rem 1.25rem;
1749
+ text-align: center;
1750
+ }
1751
+ .payman-v2-md-image-error {
1752
+ margin: 0.75rem 0;
1753
+ display: flex;
1754
+ width: 100%;
1755
+ flex-direction: column;
1756
+ align-items: center;
1757
+ justify-content: center;
1758
+ gap: 0.625rem;
1759
+ border-radius: var(--payman-v2-radius-xl);
1760
+ border: 1px dashed rgba(239, 68, 68, 0.2);
1761
+ background: rgba(239, 68, 68, 0.02);
1762
+ padding: 1.5rem 1rem;
1763
+ text-align: center;
1764
+ }
1765
+ .payman-v2-md-image-error-retry {
1766
+ margin-top: 0.25rem;
1767
+ font-size: 11px;
1768
+ font-weight: 500;
1769
+ color: var(--payman-v2-text-2);
1770
+ background: transparent;
1771
+ border: none;
1772
+ cursor: pointer;
1773
+ text-decoration: underline;
1774
+ text-underline-offset: 2px;
1775
+ font-family: inherit;
1776
+ transition: color 0.15s;
1777
+ }
1778
+ .payman-v2-md-image-error-retry:hover {
1779
+ color: var(--payman-v2-text-1);
1780
+ }
1781
+ .payman-v2-lightbox {
1782
+ position: fixed;
1783
+ inset: 0;
1784
+ z-index: 2147483647;
1785
+ display: flex;
1786
+ align-items: center;
1787
+ justify-content: center;
1788
+ padding: 1rem;
1789
+ background: rgba(2, 6, 23, 0.92);
1790
+ isolation: isolate;
1791
+ }
1792
+ .payman-v2-lightbox-controls {
1793
+ position: absolute;
1794
+ top: 1rem;
1795
+ right: 1rem;
1796
+ display: flex;
1797
+ align-items: center;
1798
+ gap: 0.5rem;
1799
+ z-index: 10;
1800
+ }
1801
+ .payman-v2-lightbox-btn {
1802
+ padding: 0.5rem;
1803
+ border-radius: var(--payman-v2-radius-full);
1804
+ border: none;
1805
+ background: rgba(0, 0, 0, 0.6);
1806
+ color: rgba(255, 255, 255, 0.9);
1807
+ cursor: pointer;
1808
+ transition: background-color 0.15s;
1809
+ display: inline-flex;
1810
+ align-items: center;
1811
+ justify-content: center;
1812
+ }
1813
+ .payman-v2-lightbox-btn:hover {
1814
+ background: rgba(0, 0, 0, 0.75);
1815
+ }
1816
+ .payman-v2-lightbox-content {
1817
+ position: relative;
1818
+ display: flex;
1819
+ align-items: center;
1820
+ justify-content: center;
1821
+ width: min(92vw, 1280px);
1822
+ height: min(88vh, 920px);
1823
+ }
1824
+ .payman-v2-lightbox-loading {
1825
+ position: absolute;
1826
+ inset: 0;
1827
+ display: flex;
1828
+ flex-direction: column;
1829
+ align-items: center;
1830
+ justify-content: center;
1831
+ gap: 0.625rem;
1832
+ }
1833
+ .payman-v2-lightbox-loading-text {
1834
+ font-size: 0.875rem;
1835
+ font-weight: 500;
1836
+ color: rgba(255, 255, 255, 0.9);
1837
+ }
1838
+ .payman-v2-lightbox-img-wrapper {
1839
+ display: flex;
1840
+ height: 100%;
1841
+ width: 100%;
1842
+ align-items: center;
1843
+ justify-content: center;
1844
+ padding: 0.75rem;
1845
+ }
1846
+ @media (min-width: 640px) {
1847
+ .payman-v2-lightbox-img-wrapper {
1848
+ padding: 1rem;
1849
+ }
1850
+ }
1851
+ .payman-v2-lightbox-img {
1852
+ display: block;
1853
+ height: 100%;
1854
+ width: 100%;
1855
+ border-radius: var(--payman-v2-radius-xl);
1856
+ -o-object-fit: contain;
1857
+ object-fit: contain;
1858
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
1859
+ -webkit-user-select: none;
1860
+ -moz-user-select: none;
1861
+ user-select: none;
1862
+ }
1863
+ .payman-v2-tooltip {
1864
+ position: relative;
1865
+ display: flex;
1866
+ }
1867
+ .payman-v2-tooltip-content {
1868
+ pointer-events: none;
1869
+ position: absolute;
1870
+ bottom: 100%;
1871
+ left: 50%;
1872
+ z-index: 20;
1873
+ margin-bottom: 0.5rem;
1874
+ transform: translateX(-50%) translateY(4px);
1875
+ opacity: 0;
1876
+ transition: all 0.15s;
1877
+ }
1878
+ .payman-v2-tooltip:hover .payman-v2-tooltip-content,
1879
+ .payman-v2-tooltip:focus-within .payman-v2-tooltip-content {
1880
+ opacity: 1;
1881
+ transform: translateX(-50%) translateY(0);
1882
+ }
1883
+ .payman-v2-tooltip-text {
1884
+ position: relative;
1885
+ border-radius: var(--payman-v2-radius-full);
1886
+ background: var(--payman-v2-bg-secondary);
1887
+ padding: 0.25rem 0.5rem;
1888
+ font-size: 10px;
1889
+ font-weight: 500;
1890
+ line-height: 1;
1891
+ color: var(--payman-v2-text-2);
1892
+ box-shadow: var(--payman-v2-shadow-input);
1893
+ white-space: nowrap;
1894
+ }
1895
+ .payman-v2-tooltip-arrow {
1896
+ position: absolute;
1897
+ left: 50%;
1898
+ top: 100%;
1899
+ transform: translateX(-50%);
1900
+ width: 0;
1901
+ height: 0;
1902
+ border-left: 5px solid transparent;
1903
+ border-right: 5px solid transparent;
1904
+ border-top: 6px solid var(--payman-v2-bg-secondary);
1905
+ }
1906
+ .payman-v2-toast {
1907
+ pointer-events: none;
1908
+ position: fixed;
1909
+ left: 50%;
1910
+ top: 1rem;
1911
+ z-index: 120;
1912
+ transform: translateX(-50%);
1913
+ }
1914
+ .payman-v2-toast-inner {
1915
+ display: inline-flex;
1916
+ align-items: center;
1917
+ gap: 0.5rem;
1918
+ border-radius: var(--payman-v2-radius-full);
1919
+ border: 1px solid;
1920
+ padding: 0.5rem 1rem;
1921
+ font-size: 0.875rem;
1922
+ backdrop-filter: blur(12px);
1923
+ box-shadow: var(--payman-v2-shadow-input);
1924
+ }
1925
+ .payman-v2-toast-success {
1926
+ border-color: var(--payman-v2-success-border);
1927
+ background: rgba(255, 255, 255, 0.95);
1928
+ color: var(--payman-v2-text-1);
1929
+ }
1930
+ .payman-v2-toast-error {
1931
+ border-color: var(--payman-v2-error-border);
1932
+ background: rgba(255, 255, 255, 0.95);
1933
+ color: var(--payman-v2-text-1);
1934
+ }
1935
+ @media (prefers-color-scheme: dark) {
1936
+ .payman-v2-root:not(.payman-v2-light) .payman-v2-toast-success,
1937
+ .payman-v2-root:not(.payman-v2-light) .payman-v2-toast-error {
1938
+ background: rgba(33, 33, 33, 0.95);
1939
+ }
1940
+ }
1941
+ .payman-v2-root.payman-v2-dark .payman-v2-toast-success,
1942
+ .payman-v2-root.payman-v2-dark .payman-v2-toast-error {
1943
+ background: rgba(33, 33, 33, 0.95);
1944
+ }
1945
+ .payman-v2-response-files {
1946
+ display: flex;
1947
+ flex-direction: column;
1948
+ gap: 0.5rem;
1949
+ width: 100%;
1950
+ }
1951
+
1
1952
  /* src/styles.css */
2
1953
  .payman-chat-root {
3
1954
  --color-primary: var(--payman-primary, #18181b);
@@ -250,6 +2201,115 @@
250
2201
  --payman-modal-brand-fg: #ffffff;
251
2202
  --payman-modal-hero-fg: #7dd3c0;
252
2203
  }
2204
+ .payman-reset-session-modal-backdrop {
2205
+ position: fixed;
2206
+ inset: 0;
2207
+ z-index: 1000;
2208
+ display: flex;
2209
+ align-items: center;
2210
+ justify-content: center;
2211
+ padding: 1rem;
2212
+ }
2213
+ .payman-reset-session-modal-overlay {
2214
+ position: absolute;
2215
+ inset: 0;
2216
+ backdrop-filter: blur(6px);
2217
+ background: color-mix(in srgb, #000 40%, transparent);
2218
+ }
2219
+ .payman-reset-session-modal-dialog {
2220
+ position: relative;
2221
+ display: flex;
2222
+ width: min(100%, 28rem);
2223
+ flex-direction: column;
2224
+ gap: 1.25rem;
2225
+ border-radius: 18px;
2226
+ border: 1px solid color-mix(in srgb, var(--payman-border, #e4e4e7) 60%, transparent);
2227
+ background: var(--payman-card, #ffffff);
2228
+ box-shadow: 0 28px 64px -32px rgb(0 0 0 / 0.42);
2229
+ padding: 1.5rem;
2230
+ color: var(--payman-foreground, #18181b);
2231
+ }
2232
+ .payman-reset-session-modal-copy {
2233
+ display: flex;
2234
+ flex-direction: column;
2235
+ gap: 0.5rem;
2236
+ }
2237
+ .payman-reset-session-modal-eyebrow {
2238
+ margin: 0;
2239
+ font-size: 0.75rem;
2240
+ font-weight: 600;
2241
+ letter-spacing: 0.02em;
2242
+ line-height: 1;
2243
+ color: var(--payman-muted-foreground, #71717a);
2244
+ text-transform: uppercase;
2245
+ }
2246
+ .payman-reset-session-modal-title {
2247
+ margin: 0;
2248
+ font-size: 1.125rem;
2249
+ font-weight: 700;
2250
+ line-height: 1.3;
2251
+ color: var(--payman-foreground, #18181b);
2252
+ }
2253
+ .payman-reset-session-modal-description {
2254
+ margin: 0;
2255
+ font-size: 0.875rem;
2256
+ line-height: 1.6;
2257
+ color: var(--payman-muted-foreground, #71717a);
2258
+ max-width: 32ch;
2259
+ }
2260
+ .payman-reset-session-modal-actions {
2261
+ display: flex;
2262
+ justify-content: flex-end;
2263
+ gap: 0.75rem;
2264
+ flex-wrap: wrap;
2265
+ padding-top: 0.25rem;
2266
+ }
2267
+ .payman-reset-session-modal-btn {
2268
+ -webkit-appearance: none;
2269
+ -moz-appearance: none;
2270
+ appearance: none;
2271
+ min-width: 7.5rem;
2272
+ border: 1px solid transparent;
2273
+ border-radius: 999px;
2274
+ padding: 0.6875rem 1rem;
2275
+ font: inherit;
2276
+ font-weight: 600;
2277
+ cursor: pointer;
2278
+ transition:
2279
+ background-color 0.15s,
2280
+ color 0.15s,
2281
+ border-color 0.15s,
2282
+ transform 0.15s;
2283
+ }
2284
+ .payman-reset-session-modal-btn:active {
2285
+ transform: scale(0.98);
2286
+ }
2287
+ .payman-reset-session-modal-btn-secondary {
2288
+ background: transparent;
2289
+ border-color: color-mix(in srgb, var(--payman-secondary-foreground, #18181b) 10%, transparent);
2290
+ color: var(--payman-foreground, #18181b);
2291
+ }
2292
+ .payman-reset-session-modal-btn-secondary:hover {
2293
+ background: color-mix(in srgb, var(--payman-muted, #f4f4f5) 65%, transparent);
2294
+ }
2295
+ .payman-reset-session-modal-btn-primary {
2296
+ background: var(--payman-primary, #18181b);
2297
+ color: var(--payman-primary-foreground, #fafafa);
2298
+ }
2299
+ .payman-reset-session-modal-btn-primary:hover {
2300
+ background: color-mix(in srgb, var(--payman-primary, #18181b) 90%, transparent);
2301
+ }
2302
+ @media (max-width: 640px) {
2303
+ .payman-reset-session-modal-dialog {
2304
+ padding: 1.25rem;
2305
+ }
2306
+ .payman-reset-session-modal-actions {
2307
+ flex-direction: column-reverse;
2308
+ }
2309
+ .payman-reset-session-modal-btn {
2310
+ width: 100%;
2311
+ }
2312
+ }
253
2313
  .payman-modal-backdrop-overlay {
254
2314
  background: var(--payman-modal-backdrop-bg);
255
2315
  }